การจัดวางตำแหน่งด้วย CSS Position

เมื่อเราวาง content ลงในหน้า Web สิ่งที่ต้องทำความเข้าใจคือ Position เพราะ position จะเป็นตัวบอกว่า content ของเราจะวางอยู่ครงส่วนไหน ซึ่ง position ใน CSS จะมีอยู่ 5 รูปแบบดังนี้

• Static
• Relative
• Absolute
• Fixed
• Sticky

Static

static จะเป็น position ที่เป็นค่า default นั่นคือถ้าเราไม่ได้ระบุ position จะถือว่ามี position เป็น static ซึ่งจะเป็นการแสดงผลไปตามลำดับของ element ตามปกติ ไม่มีอะไรพิเศษ ถ้าเป็น CSS แบบปกติเราจะเขียนแบบนี้

div.static {
  position: static;
}

กำหนด Position เป็น Static ด้วย Tailwind CSS

<div class="static ...">
  <p>Static parent</p>
  <div class="static bottom-10 left-10 ...">
    <p>Absolute child</p>
  </div>
</div>

เราสามารถใช้ Tailwind CSS ในการกำหนด position โดยที่เราจะใส่ class static เข้าไป ซึ่งผลลัพธ์จะออกมาเป็นแบบนี้

จะเห็นว่าเราdกำหนด bottom-10 และ left-10 เข้าไปแต่ไม่มีผลอะไรเลย เพราะเราใช้ position เป็น static ไม่สามารถกำหนดตำแหน่งได้

Relative

relative เป็นการกำหนด position โดย reference กับตำแหน่งเดิมถ้าเรากำหนดค่า left เป็น 0px และ top เป็น 0px กล่องนี้จะอยุ่ที่เดิม

div.relative {
  position: relative;
  left: 30px;
  bottom: 30px;
}

ตัวอย่าง CSS ด้านบนจะกำหนดให้ ขยับไปทางขวา 30px และ ขยับขึ้นไปด้านบน 30px ซึ่งจะตรงข้ามกับ ค่าที่เรากำหนด ให้เราจำว่าการกำหนด left,top,right,bottom เป็นการเพิ่ม space เข้าไปในแต่ละด้าน

กำหนด Relative Position ด้วย Tailwind CSS

<div class="static bg-purple-400 opacity-80 h-52 px-2">
  <p class="text-white p-2">Parent</p>
  <div class="relative bottom-5 left-10 bg-purple-900">
    <p class="text-white p-2">Relative child</p>
  </div>
</div>

เราจะสามารถใส่ relative เข้าไปเพื่อให้เปลี่ยน position เป็น relative และใส่ class bottom และ left เข้าไปเพื่อกำหนดระยะห่าง

• bottom-5 เพื่อกำหนดระยะห่างจากด้านล่าง(เลื่อนขึ้นด้านบน) 1.25rem
• left-10 เพื่อกำหนดระยะห่างด้านซ้าย(เลื่อนไปทางขวา) 2.5rem

Absolute

absolute เป็นการกำหนด position แบบระบุตำแหน่งได้เลย ใช้กำหนดให้อยุ่ มุมซ้ายบน มุมขวาล่าง หรือตำแน่งที่เราต้องการได้เลย โดยที่ absolute จะเทียบกับ parent ที่เป็น relative ที่อยู่ใกล้ที่สุด ถ้าไม่มี parent ที่เป็น relative ตัว child element จะเทียบกับหน้าจอ(browser window)แทน

ถ้าเขียนเป็น CSS แบบธรรมดาจะได้เป็นแบบนี้ โดยที่ ต้องใส่ class container ให้กับ parent element และตัว element ที่เราต้องการให้อยู่ตรงมุมซ้ายบน ให้ใส่ class topleft เข้าไป

.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
}

กำหนด Absolute Position ด้วย Tailwind CSS

<div class="relative ...">
  <p class="text-white p-2">Parent</p>
  <div class="absolute bottom-0 left-0 ...">
    <p class="text-white p-2">Absolute child</p>
  </div>
</div>

ในตัวอย่างนี้เราจะกำหนดให้ Absolute child แสดงผลอยู่ที่มุม ซ้ายล่าง(bottom-0 และ left-0)

ถ้าต้องการให้ยืดเต็มทั้งบรรทัดให้กำหนด right-0 เข้าไปด้วย จะกลายเป็น

Fixed

fixed จะเป็นการสดงผลที่อยู่ในตำแหน่งใดตำแหน่งหนึ่งบนหน้าจอและจะอยุ่ตรงนั้นตลอด ยกตัวอย่างเช่น

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

Div ที่มี class fixed นี้จะแสดงผลอยู่ที่มุมขวาล่างตลอดเวลา ไม่ว่าเราจะเลื่อนหน้าจอขึ้นหรือลง

กำหนด Fixed Position ด้วย Tailwind CSS

<div class="fixed bottom-0 right-0 ..">
    <p>Element นี้ใช้ Fixed position</p>
</div>

ในตัวอย่างนี้เราจะใช้ class fixed เพื่อทำให้ Element นี้แสดงผลอยู่ตรงมุมขวาล่างตลอดเวลาไม่ว่าเราจะเลื่อนหน้าจอขึ้นหรือลงก็ตาม

Sticky

จะเป็นการสลับการแสดงผลระหว่าง relatived กับ fixed ขึ้นอยู่กับการเลื่อนหน้าจอ(fixed จะทำไม่ได้ จะอยู่ที่เดิมตลอดเวลา)

ตัวอย่างของ css ที่เราเขียนเพื่อทำให้ element นี้เป็น sticky เมื่อเลื่อนลงด้านล่างเมื่อไหร่ div นี้จะติดอยู่บนหัวตลอด(top: 0)

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Sticky จะเหมือนกับ Fixed แต่จะแสดงผลแบบ Fixed ตอนที่กำลังจะหายไปจากหน้าจอ

กำหนด Fixed Position ด้วย Tailwind CSS

จากตัวอย่างด้านบนเราจะใช้ Tailwind ในการเขียน โดยใช้ class sticky และกำหนดให้อยู่บน Top สุดของ div ด้านนอกด้วย class top-0

<div class="relative overflow-scroll ...">
  <p>เลื่อนขึ้นไปเพื่อให้เห็นการทำงานของ sticky</p>
  <div class="sticky top-0 ...">
    <p>Sticky child</p>
  </div>
  <div>
    <p>Some text to enable scrolling...
    </p>
  </div>
</div>

อ่านต่อเพิ่มเติมได้ที่

• https://www.w3schools.com/css/css_positioning.asp
• https://tailwindcss.com/docs/position