|
|
position css แบบ ต่างๆ|
property position เป็นอีกตัวหนึ่งที่เราจะใช้กำหนดตำแหน่ง layout แต่ จะสามารถ กำหนด ได้ละเอียดกว่า การใช้ float เพราะเมื่อเรากำหนด position แล้ว สิ่งที่จะต้องกำหนดตามมาก็คือค่า left, right, top ,bottom มาดูกันว่ามีอะไรบ้างและใช้อย่างไร 1. position:staticเป็น default ของ position ถ้าไม่ใส่อะไร ก็จะถือว่า มีค่าเป็น static ก็คือไม่มี position น่ะแหละ พูดตามตรงไม่เคยใช้เลยตัวนี้ แต่มันมีก็เลยต้องอธิบายว่ามันคืออะไร เอาไว้ fixd ให้ อยู่ตรงไหนก็ได้ของ เบราเซอร์ โดยใส่ค่า left, right, top ,bottom หากใส่ ค่า left:10px; top:100px วัตถุที่ถูกกำนดก็จะ อยู่ถัดจากขอบเบราเซอร์ด้านซ้าย 10px ถัดจากด้านบนลงมา 100 px ข้อดีคือ เมื่อเราเลื่อน Scroll bar ลงมา มันก็จะยังคงอยู่ตรงตำแหน่งนั้นไม่หายไปไหน มันตามเรามาทุกที่ ว่าง่ายๆ แต่ property นี้ ใช้ได้กับ เบราเซอร์ใหม่ๆ อย่าง IE7, Firefox2.0 (1.5 ไม่ได้ลอง) ส่วน IE6 ไม่เกิดผลใดๆ ดังนั้น ยังไม่ควรนำมาใช้ครับ 3. position:absolute เหมือนแบบ fixed ครับ แต่เลื่อน Scroll bar แล้วหายไปตามการเลื่อนครับ กำหนดตำแหน่งต่างๆ ด้วยค่า left, right, top ,bottom เช่นกัน
จะได้
อยู่ด้านบนขวาของ เบราเซอร์ 4. position:relativeเมื่อกำหนดเป็น relative จะสามารถใส่ค่า left, right, top ,bottom ได้เช่นกัน แต่จะอ้างอิงจากจุดที่ตัวมันเองอยู่ ไม่ได้อ้างอิงจากขอบเบราเซอร์
จะได้
ใส่ absolute ให้ bb
จะได้
ใส่ relativeให้ bb
จะได้
อย่างที่เห็นว่า absolute จะ อ้างอิงกับขอบของเบราเซอร์ แต่เราจะให้มันอ้างอิง กับขอบของ div ตัวนอก โดยการใช้สูตร ด้านนอก relative ด้านใน absolute
จะได้
นำมาใช้ทำปุ่ม moreinfo หรือ อ่านต่อคลิกที่นี่ ได้โดยไม่ต้อง มี td หรืออะไรมาดัน ไม่ว่าเนื้อหาสั้นยาว ก็ไม่เสียตำแหน่งครับ 6.ประยุกต์ใช้ relativeทำกล่องสมัครสมาชิก
จะได้
|
|
position css
|
|
