CSS : ใช้งาน Position กันอย่างไร

CSS : ใช้งาน Position กันอย่างไร

ทำงานกับ CSS มาซักพัก น่าจะได้พบเจอกับ Position กันบ้าง แต่เข้าใจการใช้งานมันกันขนาดไหน เอาเป็นว่า เรามาทำความเข้าใจไปด้วยกันเลยนะครับ

CSS : Position นั้นมีอะไรบ้าง

คราวนี้ผมจะลองเขียน 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;
}

ซึ่งจะแสดงผลดังรูป

CSS : ใช้งาน Position กันอย่างไร
จาก Code ที่เขียน เราจะได้เว็บดังรูป

Position : static

position : static นั้นถือเป็นค่าเริ่มต้นสำหรับ position เลย ดังนั้นเราจะตั้งค่า position หรือไม่ ค่า position ก็จะเป็น static อยู่แล้ว แต่ผมจะลองใส่ค่าให้ดูเป็นตัวอย่างว่า เว็บจะแสดงผลออกมาเป็นแบบไหน

#div-a {
  background: #339;
  position: static;
}
CSS : ใช้งาน Position กันอย่างไร
ผลลัพธ์จากการตั้ง #div-a ด้วย position:static

จะเห็นว่าไม่มีความเปลี่ยนแปลงใด ๆ เนื่องจากอย่างที่ได้กล่าวไว้ เพราะค่า position นั้น มีค่าเริ่มต้นเป็น static อยู่แล้ว static

Position : relative

position : relative นั้นจะมีลักษณะคล้าย ๆ กับ static ต่างกันตรงที่ relative นั้น เราสามารถใช้ top left bottom right ในการกำหนดตำแหน่งได้

#div-a {
  background: #339;
  position: relative;
}
CSS : ใช้งาน Position กันอย่างไร
position : relative ที่ยังไม่ได้กำหนดตำแหน่ง แสดงผลออกมาเหมือนกับ position : static

คราวนี้เรามากำหนดตำแหน่งให้มันกัน โดยตำแหน่งที่ระบุไป จะเริ่มต้นนับจาก element ที่อยู่ก่อนหน้า เรามาลองกับ #div-2 นะครับ น่าจะเห็นผลชัดเจนกว่า

#div-2 {
  background: #C0C;
  position: relative;
  top: 30px;
  left: -20px
}
#div-a {
  background: #339;
}
CSS : ใช้งาน Position กันอย่างไร
#div-2 จะห่างจาก #div-1 ตามที่กำหนดไว้

จะเห็นว่าตอนนี้ การแสดงผลของ relative ไม่เหมือนกับ static แล้ว โดย #div-2 นั้นจะขยับตัวเองจากด้านบนลงมา 30 pixels และขยับตัวเองจากด้านซ้ายไปทางซ้าย 20 pixels

#div-2 {
  background: #C0C;
  position: relative;
  bottom: 10px;
  right: 20px;
}
CSS : ใช้งาน Position กันอย่างไร
ตำแหน่งเปลี่ยนไปจากครั้งที่แล้ว หลังเราเปลี่ยนค่า

คราวนี้เราจะเห็นว่า #div-2 นั้นจะขยับตัวเองจากด้านล่างขึ้นมา 10 pixels และขยับตัวเองจากด้านขวาไปทางซ้าย 20 pixels

Position : absolute

position : absolute นั้นจะไม่สนใจ element ก่อนหน้า และจะพาตัวเองไปยังจุดนั้นเลย

#div-2 {
  background: #C0C;
  position: absolute;
  top: 0px;
  right: 0px;
}
CSS : ใช้งาน Position กันอย่างไร
ตอนนี้ #div-2 ไปอยู่ที่ตำแหน่งด้านบนสุด ด้านขวาสุดแล้ว

ต่อมาเรามาลองใช้ position : absolute กับ #div-b บ้างนะ

#div-2 {
  background: #C0C;
}
#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}
CSS : ใช้งาน Position กันอย่างไร
จะเห็นว่า #div-b ไปอยู่ด้านบนขวา

ใช้ 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;
}
CSS : ใช้งาน Position กันอย่างไร
#div-b จะอยู่ด้านบนขวาสุดของ #div-2

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;
}
CSS : ใช้งาน Position กันอย่างไร
Position : absolute

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

CSS : ใช้งาน Position กันอย่างไร
#div-b หายไปจากการ scroll ลงมา

Fixed

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

CSS : ใช้งาน Position กันอย่างไร
#div-b ไม่ขยับไปไหน

รูปแบบการใช้ Position ก็มีคร่าว ๆ ประมาณนี้ ลองนำไปประยุกต์ใช้กับงานที่ทำอยู่นะครับ

16 responses to “CSS : ใช้งาน Position กันอย่างไร”

  1. ช่วยดูเว็บผมให้หน่อยครับ ผมอยากย้ายปุ่ม “อ่านต่อ” ไปตำแหน่งเหมือนในรูปที่แนบมาควรจะใช้คำสั่งอะไรดีครับ

    เว็บ: 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 ตามที่แนะนำ ขอบคุณมากๆ ครับ

  2. อ่านแล้วทำตามเข้าใจเลยครับ หลังจากที่ งง ลองผิดลองถูกมานานปีกว่า .. ขอบคุณครับ

  3. เป็นการอธิบายและยกตัวอย่างได้เยี่ยมมาก ขอให้พัฒนาต่อไปน่ะครับ

  4. อยากทราบว่าถ้าต้องการให้ Div มีความสูงเท่ากันโดยอัตโนมัติ ต้องทำยังไงค่ะ รบกวนหน่อยคะ

  5. เวลาใช้div แล้วย่อหน้าต่างมันย้ายที่ไปหมดเลยอะค่ะ ต้องทำไงอะคะ

Leave a Reply

Your email address will not be published.