ทำงานกับ CSS มาซักพัก น่าจะได้พบเจอกับ Position กันบ้าง แต่เข้าใจการใช้งานมันกันขนาดไหน เอาเป็นว่า เรามาทำความเข้าใจไปด้วยกันเลยนะครับ
CSS : Position นั้นมีอะไรบ้าง
- static
- relative
- absolute
- fixed
- inherit
คราวนี้ผมจะลองเขียน Code แบบนี้นะครับ
<div id="wrapper">
<div id="div-1">div-1</div>
<div id="div-2">
<div id="div-a">div-a</div>
<div id="div-b">div-b</div>
<div id="div-c">div-c</div>
</div>
<div id="div-3">div-3</div>
</div>
div {
padding: 20px;
color: #FFF;
}
#wrapper {
width: 400px;
}
#div-1 {
background: #000;
}
#div-2 {
background: #C0C;
}
#div-3 {
background: #666;
}
#div-a {
background: #339;
}
#div-b {
background: #66C;
}
#div-c {
background: #99F;
}
ซึ่งจะแสดงผลดังรูป

Position : static
position : static นั้นถือเป็นค่าเริ่มต้นสำหรับ position เลย ดังนั้นเราจะตั้งค่า position หรือไม่ ค่า position ก็จะเป็น static อยู่แล้ว แต่ผมจะลองใส่ค่าให้ดูเป็นตัวอย่างว่า เว็บจะแสดงผลออกมาเป็นแบบไหน
#div-a {
background: #339;
position: static;
}

จะเห็นว่าไม่มีความเปลี่ยนแปลงใด ๆ เนื่องจากอย่างที่ได้กล่าวไว้ เพราะค่า position นั้น มีค่าเริ่มต้นเป็น static อยู่แล้ว static
Position : relative
position : relative นั้นจะมีลักษณะคล้าย ๆ กับ static ต่างกันตรงที่ relative นั้น เราสามารถใช้ top left bottom right ในการกำหนดตำแหน่งได้
#div-a {
background: #339;
position: relative;
}

คราวนี้เรามากำหนดตำแหน่งให้มันกัน โดยตำแหน่งที่ระบุไป จะเริ่มต้นนับจาก element ที่อยู่ก่อนหน้า เรามาลองกับ #div-2 นะครับ น่าจะเห็นผลชัดเจนกว่า
#div-2 {
background: #C0C;
position: relative;
top: 30px;
left: -20px
}
#div-a {
background: #339;
}

จะเห็นว่าตอนนี้ การแสดงผลของ relative ไม่เหมือนกับ static แล้ว โดย #div-2 นั้นจะขยับตัวเองจากด้านบนลงมา 30 pixels และขยับตัวเองจากด้านซ้ายไปทางซ้าย 20 pixels
#div-2 {
background: #C0C;
position: relative;
bottom: 10px;
right: 20px;
}

คราวนี้เราจะเห็นว่า #div-2 นั้นจะขยับตัวเองจากด้านล่างขึ้นมา 10 pixels และขยับตัวเองจากด้านขวาไปทางซ้าย 20 pixels
Position : absolute
position : absolute นั้นจะไม่สนใจ element ก่อนหน้า และจะพาตัวเองไปยังจุดนั้นเลย
#div-2 {
background: #C0C;
position: absolute;
top: 0px;
right: 0px;
}

ต่อมาเรามาลองใช้ position : absolute กับ #div-b บ้างนะ
#div-2 {
background: #C0C;
}
#div-b {
background: #66C;
position: absolute;
top: 0px;
right: 0px;
}

ใช้ Position : relative คู่กับ Position : absolute
แล้วถ้าเราอยากให้ #div-b มาอยู่ในกรอบ #div-2 ก็ทำได้โดยการใส่ position : relative ให้ #div-2 เหมือนเป็นการกำหนดกรอบให้มัน
#div-2 {
background: #C0C;
position: relative;
}
#div-b {
background: #66C;
position: absolute;
top: 0px;
right: 0px;
}

Position : fixed
position : fixed นั้นทำหน้าที่คล้าย absolute เลย แต่มีแตกต่างกันที่ fixed นั้นจะใช้กับ relative เพื่อกำหนดกรอบของมันไม่ได้ และจะตรึงตัวเองอยู่ตรงนั้นเสมอ ดูตัวอย่างน่าจะเข้าใจง่ายกว่าครับ อย่างเช่น
Absolute
div {
padding: 20px;
color: #FFF;
}
#wrapper {
width: 400px;
height: 2000px;
}
#div-1 {
background: #000;
}
#div-2 {
background: #C0C;
}
#div-3 {
background: #666;
}
#div-a {
background: #339;
}
#div-b {
background: #66C;
position: absolute;
top: 0px;
right: 0px;
}
#div-c {
background: #99F;
}

เมื่อทำการ scroll ลงมา #div-b จะไม่ได้ขยับตามลงมา และหายไป

Fixed
แต่ถ้าเป็น position : fixed แล้ว มันจะตรึงตัวเองอยู่กับที่ ไม่ว่าจะ scroll ลงมายังไง มันก็จะอยู่ที่ตำแหน่งนั้น

รูปแบบการใช้ Position ก็มีคร่าว ๆ ประมาณนี้ ลองนำไปประยุกต์ใช้กับงานที่ทำอยู่นะครับ
16 responses to “CSS : ใช้งาน Position กันอย่างไร”
ช่วยดูเว็บผมให้หน่อยครับ ผมอยากย้ายปุ่ม “อ่านต่อ” ไปตำแหน่งเหมือนในรูปที่แนบมาควรจะใช้คำสั่งอะไรดีครับ
เว็บ: https://www.windowsfolk.com
ลองกำหนด position:relative; ให้กับ
div.suf-mag-excerpt ดิครับ
แล้วหลังจากนั้นก็ position:absolute; ให้กับปุ่มอ่านต่ออะครับ
คร่าว ๆ ประมาณนี้ ลองทำเองก่อนนะครับ ถ้าติดอะไร มาถามเพิ่มได้ครับ ^^
ยังไม่ได้เลยครับ แต่เท่าที่ดูทั้งสองส่วนตั้งค่า position ตามที่ท่านแนะนำมาแล้ว ทั้ง div.suf-mag-excerpt และ div.suf-mag-excerpt-footer ทีนี้เพิ่ม CSS เข้าไปทับ ข้อความอ่านต่อมันก็เลยกระจายไปเลย
ผมว่า ใน excerpt เนี่ยน่าจะกำหนดความสูงไปเลยนะครับ
แต่ถ้าไม่กำหนดความสูง ตัวอ่านต่อ น่าจะมาอยู่ด้านนอก excerpt อะครับ น่าจะกำหนดให้อยู่ใต้สุดง่ายกว่าอยู่ใน div.suf-mag-excerpt
ทำได้แล้วครับ ใช้กำหนดความสูงของตัว excerpt ตามที่แนะนำ ขอบคุณมากๆ ครับ
เย้ เย้ ยินดีด้วยครับ
อ่านแล้วทำตามเข้าใจเลยครับ หลังจากที่ งง ลองผิดลองถูกมานานปีกว่า .. ขอบคุณครับ
ขอบคุณมากมาก เลยครับ
ขอบคุณมากครับ เข้าใจขึ้นเยอะเลย
เป็นการอธิบายและยกตัวอย่างได้เยี่ยมมาก ขอให้พัฒนาต่อไปน่ะครับ
อยากทราบว่าถ้าต้องการให้ Div มีความสูงเท่ากันโดยอัตโนมัติ ต้องทำยังไงค่ะ รบกวนหน่อยคะ
ก็ต้องเขียน script กำหนดค่าให้มันครับ แค่ css อย่างเดียว ไม่ได้ครับ
ถ้าไม่อย่างนั้นต้องใช้ css ใหม่ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
อธิบายได้เข้าใจง่ายมากๆ เลยครับ
เวลาใช้div แล้วย่อหน้าต่างมันย้ายที่ไปหมดเลยอะค่ะ ต้องทำไงอะคะ
ขอบคุณสำหรับคอนเทนต์ดีๆ
ขอบคุณสำหรับคอมเม้นต์ครับ