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 ก็มีคร่าว ๆ ประมาณนี้ ลองนำไปประยุกต์ใช้กับงานที่ทำอยู่นะครับ


Posted

in

by

Comments

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

  1. hotbiee Avatar

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

    เว็บ: https://www.windowsfolk.com

    1.  Avatar
      Anonymous

      ลองกำหนด position:relative; ให้กับ 
      div.suf-mag-excerpt ดิครับ

      แล้วหลังจากนั้นก็ position:absolute; ให้กับปุ่มอ่านต่ออะครับ

      คร่าว ๆ ประมาณนี้ ลองทำเองก่อนนะครับ ถ้าติดอะไร มาถามเพิ่มได้ครับ ^^

      1. hotbiee Avatar

        ยังไม่ได้เลยครับ แต่เท่าที่ดูทั้งสองส่วนตั้งค่า position ตามที่ท่านแนะนำมาแล้ว ทั้ง div.suf-mag-excerpt และ div.suf-mag-excerpt-footer ทีนี้เพิ่ม CSS เข้าไปทับ ข้อความอ่านต่อมันก็เลยกระจายไปเลย

        1.  Avatar
          Anonymous

          ผมว่า ใน excerpt เนี่ยน่าจะกำหนดความสูงไปเลยนะครับ

          แต่ถ้าไม่กำหนดความสูง ตัวอ่านต่อ น่าจะมาอยู่ด้านนอก excerpt อะครับ น่าจะกำหนดให้อยู่ใต้สุดง่ายกว่าอยู่ใน div.suf-mag-excerpt

          1. hotbiee Avatar

            ทำได้แล้วครับ ใช้กำหนดความสูงของตัว excerpt ตามที่แนะนำ ขอบคุณมากๆ ครับ

          2.  Avatar
            Anonymous

            เย้ เย้ ยินดีด้วยครับ

  2. smile Avatar
    smile

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

  3. note Avatar
    note

    ขอบคุณมากมาก เลยครับ

  4. toyakung Avatar
    toyakung

    ขอบคุณมากครับ เข้าใจขึ้นเยอะเลย

  5. piramid Avatar
    piramid

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

  6. Godis Bow Avatar
    Godis Bow

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

    1. rabbitinblack Avatar
      rabbitinblack

      ก็ต้องเขียน script กำหนดค่าให้มันครับ แค่ css อย่างเดียว ไม่ได้ครับ

      ถ้าไม่อย่างนั้นต้องใช้ css ใหม่ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  7. zabulatu Avatar
    zabulatu

    อธิบายได้เข้าใจง่ายมากๆ เลยครับ

  8. prsnoopy Avatar
    prsnoopy

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

  9. irishwhisky Avatar
    irishwhisky

    ขอบคุณสำหรับคอนเทนต์ดีๆ

    1. rabbitinblack Avatar
      rabbitinblack

      ขอบคุณสำหรับคอมเม้นต์ครับ

Leave a Reply to rabbitinblack Cancel reply

Your email address will not be published. Required fields are marked *