CSS Position

หัวใจสำคัญของการวางเลเอาท์หน้าเว็บด้วย CSS อีกอย่างที่ถือว่าสำคัญ อันดับต้นๆ คือ การสั่ง positioning ของ วัตถุ ที่ลอยๆ อยู่บนหน้าเว็บ

หลักๆ คือ tag div(s) ของ xhtml นั่นเอง

จะเลือกใช้อันไหนระหว่าง static, relative, absolute

1. Static

สำหรับค่า ดีฟอลท์ หรือค่าพื้นฐานของ position คือ static ครับ หมายถึง ถ้าในกรณีที่เราไม่ได้กำหนด position ให้ element ใดๆ css จะเลือกค่า static ให้โดยปริยาย และ ข้อสำคัญของการใช้ static คือไม่สามารถสั่งได้ว่าให้ห่างจาก ซ้าย ขวา หน้า หลัง ได้เท่าไหร่

2.relative

ถ้า กำหนด position ให้เป็น relative คุณสามารถจะให้ วัตถุอยู่ถัดจาก element ก่อนหน้าโดยลักษณะของการกำหนด position: relative; top: 20px; left: -50px; ลักษณะการเขียนอย่างนี้ จะทำให้ element ที่ถูกกำหนด ให้ด้านบน ห่างจาก element ก่อนหน้า 20px และ เขยื้อนไปทางซ้าย ถ้าเอาเทียบกับ element ก่อนหน้า -50px

3. Absolute

ถ้า position ของ element ใดๆ โดนสั่งแบบ absolute การทำงานคือ ไม่ว่าคุณจะสั่งให้ไปอยู่ที่ไหนในหน้า absolute จะไปตามสั่ง โดยไม่ได้มีการอ้างอิงค่า จาก element ก่อนหน้าครับ คือแยกออกไปเลย โดยการอ้างอิงตำแหน่ง แกน x,y ตามหน้าจอ

เช่น position: absolute; top: 20px; left: 80px; ตำแหน่งของวัตถุจะอยู่ห่างจากขอบจอของบราวเซอร์ด้านบน 20px ด้านซ้าย 80px คับ

การซ้อน position แบบ ซ้อน absolute ใน relative ซึ่งค่า absolute อยู่ใน element ของ relative ค่า absolute แบบนี้ จะอ้างอิงค่า x,y ของ element ที่ถูกสั่ง position เป็น relative แทนที่การอ้างค่า x,y ของหน้าเว็บแทนนะครับ

เช่น

.relative-1 {

position: relative;

left: 100px;

top: 30px;

background: #ff9900;

height: 150px;

width: 700px;

}

.absolute-1 {

position: absolute;

top: 20px;

right: 5px;

background: #FFFFFF;

}

โดย

<div class="relative-1">

ทดสอบลักษณะการแสดงผลของง position relative

<div class="absolute">

ตัวนี้ absolute

</div>

</div>

ถ้าหากเราเขียน กำหนดตำแหน่ง position และนำไปใช้ใน xhtml ให้กับ elements แบบนี้ คลาส absolute-1 จะอ้างค่า x,y จาก คลาส relative-1 แทนการอ้างค่าจากหน้าจอ

และถ้าจะเขียนให้มันกว่านี้ ต้องใช้คู่กับ float ครับ ยังไง ? ติมตามเรื่อง float ในตอนต่อไปคับ