รูปแบบ position : value
คือ การวางเลย์เอาท์หน้าเว็บ ด้วยการกำหนดให้วัตถุย้ายไปในตำแหน่งต่างๆ
ค่า value มีดังนี้
static
เป็นค่าปกติของ position คือ ถ้าในกรณีที่เราไม่ได้กำหนด position ให้ element ใดๆ css จะเลือกค่า static ให้โดยปริยาย และการใช้ static คือไม่สามารถสั่งได้ว่าให้ห่างจาก ซ้าย ขวา หน้า หลัง ได้เท่าไหร่
fixed
ทำให้ element ที่ถูกกำหนดอยู่กับที่ มันจะไม่ย้ายไปไหน แม้ว่าหน้าต่างจะเลื่อนไป โดยหากจะกำหนดตำแหน่งของวัตถุบนจอภาพก็ให้ใช้กับ top bottom left และ right เช่น
position: fixed;
top: 30px;
left: 100px;
relative
ถ้ากำหนด position ให้เป็น relative สามารถจะให้ element นี้ อยู่ถัดจาก element ก่อนหน้า โดยกำหนด กับคำสั่ง top bottom left right เช่น position: relative; top: 20px; left: -50px; หมายความว่า element ที่ถูกกำหนดนี้ ให้ด้านบนอยู่ห่างจาก element ก่อนหน้านี้ 20px และ เขยื้อนไปทางซ้าย 50px เมื่อเทียบกับ element ก่อนหน้านี้
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 ของหน้าเว็บแทน
เช่น
.box1 {
position: relative;
left: 100px;
top: 30px;
background: #ff9900;
height: 150px;
width: 700px;
}
.box2 {
position: absolute;
top: 20px;
right: 5px;
background: #FFFFFF;
}
โดย
<div class="box1">
<div class="box2">
</div>
</div>
คลาส box2 จะอ้างค่า x,y จาก คลาส box1 แทนการอ้างค่าจากหน้าจอ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น