พื้นฐาน CSS Properties - Position - การกำหนดตำแหน่ง

แปลความหมายเพลง Olivia Ong – Kiss Me

07/05/2014

Google วันนี้มีอะไร ? ฉลอง 40 ปี ลูกบาศก์รูบิค

19/05/2014

วันนี้เป็นเรื่องของ position หรือการกำหนดตำแหน่งของ element ว่าจะให้มันแสดงผลอยู่ตรงไหนๆ และมีรูแบบการแสดงผลด้วย

Position – เป็นการกำหนดลักษณะการแสดงผล แบบต่างๆ ได้แก่
position: static; – เป็นค่าเริ่มต้น
position: absolute; – กำหนดตำแหน่งได้ ทับ element อื่น พาตัวเองไปอยู่จุดที่กำหนด โดยอิงจากตำแหน่งของจอ browser โดยไม่สน element อื่น ยกเว้นว่า absolute ไปอยู่ใน element ที่กำหนด position เป็น relative มันก็จะไปอิงกับ element นั้นแทนที่จะอิง browser
position: fixed; – ตำแหน่งค้างอยู่ที่เดิม แม่จะเลื่อน scrollbar ลงมันก็จะเหมือนเลื่อนตาม
position: relative; – กำหนดตำแหน่งได้ คล้าย absolute แต่ตำแหน่งจพถูกอิงกับ element แม่ของมัน หรือที่อยู่ด้านบน

และสามารถกำหนดตำแหน่งการแสดงผล
left – กำหนดระยะห่างจากด้านซ้าย
right – กำหนดระยะห่างจากด้านขวา
top – กำหนดระยะห่างจากด้านบน
bottom – กำหนดระยะห่างจากด้านล่าง

ตัวอย่าง

 <style type='text/css'>
* {font-size:36px;}
body {border: 5px dashed;}
#header{
height: 25%;
background-color:#CCC;
}
#content{
height: 50%;
background-color:#999;
}
#footer{
height: 25%;
background-color:#CCC;
}
.div-s {
width: 100px;
height: 100px;
position: static;
background:#060;
}
.div-a {
position:absolute;
width: 100px;
height: 100px;
top: 0px;
left: 300px;
background-color:#F00;
}
.div-r {
position:relative;
width: 100px;
height: 100px;
top: 0px;
left: 300px;
background-color:#00F;
}
</style>
<body>
<div id="header"></div>
<div id="content">
    <div class="div-s"></div>
    <div class="div-r"></div>
     <div class="div-a"></div>
    </div>
 <div id="footer"></div>
</body>

ผลลัพธ์

– กำหนดให้ div-s, div-r, div-a อยู่ใน div content
– โดยที่ตำแหน่งของ div-r และ div-a ถูกกำหนดค่าให้เท่ากัน แต่ตำแหน่งที่แสดงผลกลับอยู่คนละที่เลย – โดยห่างขอบซ้ายมา 300px ห่างขอบบน 0px
– ซึ่ง div-r ห่างจากขอบ 0px จริง แต่เป็นขอบของ div content
– แต่ div-a ห่างจากขอบของ body
– ส่วนตำแหน่งของ div-s จะอยู่ถัดจาก div-r ซึ่งอยู่ด้านบน แต่ถ้าไม่มี div-r div-s ก็จะเลื่อนขึ้นไปด้านบน
– คราวนี้ลองเปลี่ยนขนาดของ div content ซะหน่อย ให้มันอยู่ต่ำๆหน่อย ก็จะเห็นว่า div-s และ div-r ซึ่งอยู่ใน div content เปลี่ยนตำแหน่งตามด้วย แต่ div-a ไม่เปลี่ยนตาม ทั้งๆ ที่อยู่ใน div content