CSS Positioning: Static, Relative, Absolute, Fixed

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับคุณสมบัติ display ซึ่งเป็นพื้นฐานสำคัญในการควบคุมการแสดงผลของ Element ต่างๆ บนหน้าเว็บ ในบทนี้ เราจะมาเจาะลึกเรื่อง CSS Positioning ซึ่งเป็นอีกหนึ่งเครื่องมือที่ทรงพลังในการจัดวาง Element ให้ตรงตามที่เราต้องการอย่างแม่นยำ ไม่ว่าจะเป็นการซ้อนทับ Element, การกำหนดตำแหน่งที่แน่นอน หรือการตรึง Element ไว้บนหน้าจอ

ทำไมต้องเรียนรู้ CSS Positioning?

ลองนึกภาพว่าคุณต้องการสร้าง Layout ที่ซับซ้อนกว่าการวาง Element เรียงต่อกันตามปกติ เช่น ต้องการให้ภาพซ้อนทับข้อความ, ต้องการให้เมนูติดตามหน้าจอเมื่อเลื่อนลง หรือต้องการวาง Element ในตำแหน่งที่เฉพาะเจาะจงบนหน้าเว็บ CSS Positioning จะช่วยให้คุณทำสิ่งเหล่านี้ได้อย่างง่ายดาย

ค่าที่เป็นไปได้ของ Property `position`

คุณสมบัติ position ใน CSS มีค่าที่สำคัญอยู่ 4 ค่า ได้แก่:

static
relative
absolute
fixed

เราจะมาดูกันทีละค่าว่าแต่ละค่าทำงานอย่างไร และมีกรณีการใช้งานแบบไหนบ้าง

1. `position: static` (ค่าเริ่มต้น)

static เป็นค่าเริ่มต้นของ Element ทุกตัวบนหน้าเว็บ หากคุณไม่ได้กำหนดค่า position ให้กับ Element ใดๆ Element นั้นก็จะมีค่า position เป็น static โดยปริยาย

Element ที่มี position: static จะถูกจัดวางตามปกติของ HTML Flow นั่นคือ Element แบบ Block จะวางซ้อนกันในแนวดิ่ง และ Element แบบ Inline จะวางเรียงต่อกันในแนวนอน

ข้อสำคัญ: Element ที่มี position: static จะไม่สามารถใช้ Properties top, right, bottom, และ left เพื่อกำหนดตำแหน่งได้ Properties เหล่านี้จะไม่มีผลใดๆ ทั้งสิ้น

ตัวอย่าง:

<div class="static-container">
  <div class="static-box">Box 1 (static)</div>
  <div class="static-box">Box 2 (static)</div>
</div>

.static-container {
  width: 300px;
  border: 1px solid black;
}

.static-box {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px;
}

จากตัวอย่างนี้ Box 1 และ Box 2 จะถูกวางซ้อนกันในแนวดิ่งตามปกติ

2. `position: relative`

position: relative ช่วยให้เราสามารถปรับตำแหน่งของ Element ได้เล็กน้อยจากตำแหน่งเดิมที่ควรจะเป็นใน Normal Flow โดยใช้ Properties top, right, bottom, และ left

ข้อสำคัญ: Element ที่มี position: relative จะยังคง "จอง" พื้นที่เดิมของตัวเองไว้ แม้ว่าจะถูกเลื่อนตำแหน่งไปแล้วก็ตาม Element อื่นๆ จะไม่เข้ามาแทนที่พื้นที่นั้น

ตัวอย่าง:

<div class="relative-container">
  <div class="relative-box">Box 1 (relative)</div>
  <div class="relative-box">Box 2 (static)</div>
</div>

.relative-container {
  width: 300px;
  border: 1px solid black;
}

.relative-box {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px;
  position: relative;
  top: 20px; /* เลื่อนลง 20px จากตำแหน่งเดิม */
  left: 30px; /* เลื่อนไปทางขวา 30px จากตำแหน่งเดิม */
}

จากตัวอย่างนี้ Box 1 จะถูกเลื่อนลง 20px และเลื่อนไปทางขวา 30px จากตำแหน่งเดิม แต่พื้นที่เดิมของ Box 1 ยังคงถูกจองไว้ ทำให้ Box 2 ยังคงอยู่ด้านล่างของ Box 1

3. `position: absolute`

position: absolute เป็นการกำหนดตำแหน่งของ Element โดยอ้างอิงจาก Ancestor Element ที่มี position เป็นอย่างอื่นที่ไม่ใช่ static ที่ใกล้ที่สุด หากไม่มี Ancestor Element ที่มี position เป็นอย่างอื่นที่ไม่ใช่ static Element นั้นจะอ้างอิงจาก <html> tag (ซึ่งถือว่าเป็น Initial Containing Block)

Element ที่มี position: absolute จะถูกนำออกจาก Normal Flow อย่างสมบูรณ์ Element อื่นๆ จะไม่รับรู้ถึงการมีอยู่ของ Element นี้ และสามารถเข้ามาแทนที่พื้นที่ของ Element นี้ได้

ตัวอย่าง:

<div class="absolute-container">
  <div class="absolute-box">Box 1 (absolute)</div>
  <div class="absolute-box">Box 2 (static)</div>
</div>

.absolute-container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  position: relative; /* ทำให้ container เป็น Relative Positioning Context */
}

.absolute-box {
  background-color: #f0f0f0;
  padding: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
}

จากตัวอย่างนี้ Box 1 จะถูกวางในตำแหน่ง 10px จากด้านบนและด้านซ้ายของ .absolute-container (เนื่องจาก .absolute-container มี position: relative) Box 2 จะถูกวางทับ Box 1 เพราะ Box 1 ถูกนำออกจาก Normal Flow แล้ว

ข้อผิดพลาดที่พบบ่อย: ลืมกำหนด position ให้กับ Container Element ทำให้ Element ที่มี position: absolute อ้างอิงจาก <html> tag แทนที่จะเป็น Container ที่ต้องการ

4. `position: fixed`

position: fixed คล้ายกับ position: absolute แต่แตกต่างกันตรงที่ Element ที่มี position: fixed จะถูกตรึงไว้กับ Viewport (หน้าจอ) ไม่ว่าจะเลื่อนหน้าจอไปที่ใด Element นั้นก็จะยังคงอยู่ในตำแหน่งเดิมเสมอ

ตัวอย่าง:

<div class="fixed-box">Fixed Box</div>

.fixed-box {
  background-color: #f0f0f0;
  padding: 10px;
  position: fixed;
  top: 20px;
  right: 20px;
}

จากตัวอย่างนี้ .fixed-box จะถูกตรึงไว้ที่มุมขวาบนของหน้าจอ แม้ว่าจะเลื่อนหน้าจอลง .fixed-box ก็จะยังคงอยู่ที่เดิม

กรณีใช้งานจริง: การสร้าง Navigation Bar ที่ติดตามหน้าจอเมื่อเลื่อนลง

`z-index`: ควบคุมลำดับการซ้อนทับ

เมื่อ Element หลายตัวซ้อนทับกัน เราสามารถใช้ Property z-index เพื่อกำหนดลำดับการซ้อนทับได้ Element ที่มี z-index สูงกว่าจะอยู่ด้านบนของ Element ที่มี z-index ต่ำกว่า

ข้อสำคัญ: z-index จะทำงานก็ต่อเมื่อ Element นั้นมี position เป็นอย่างอื่นที่ไม่ใช่ static

ตัวอย่าง:

<div class="z-index-container">
  <div class="z-index-box box1">Box 1 (z-index: 2)</div>
  <div class="z-index-box box2">Box 2 (z-index: 1)</div>
</div>

.z-index-container {
  width: 200px;
  height: 150px;
  position: relative;
}

.z-index-box {
  width: 100px;
  height: 80px;
  position: absolute;
  top: 20px;
  left: 20px;
}

.box1 {
  background-color: rgba(255, 0, 0, 0.5); /* สีแดงโปร่งใส */
  z-index: 2;
}

.box2 {
  background-color: rgba(0, 0, 255, 0.5); /* สีน้ำเงินโปร่งใส */
  top: 50px;
  left: 50px;
  z-index: 1;
}

จากตัวอย่างนี้ Box 1 จะอยู่ด้านบนของ Box 2 เพราะมี z-index สูงกว่า

ข้อควรระวัง: การใช้ z-index มากเกินไปอาจทำให้โค้ดซับซ้อนและยากต่อการบำรุงรักษา พยายามใช้ z-index เท่าที่จำเป็นเท่านั้น

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ CSS Positioning ซึ่งเป็นเครื่องมือสำคัญในการจัดวาง Element บนหน้าเว็บอย่างแม่นยำ เราได้เรียนรู้เกี่ยวกับค่าต่างๆ ของ Property position ได้แก่ static, relative, absolute, และ fixed รวมถึง Property z-index ที่ใช้ควบคุมลำดับการซ้อนทับของ Element

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับ CSS Float ซึ่งเป็นอีกหนึ่งเทคนิคในการจัด Layout ที่ยังคงมีการใช้งานอยู่บ้างในปัจจุบัน

CSS Positioning: Static, Relative, Absolute, Fixed