CSS Positioning - ตั้งแต่พื้นฐานถึงซับซ้อน

1️⃣ Static Positioning (ค่าเริ่มต้น)

📌 HTML

<div class="demo-static">
  <div class="static-box">Box 1</div>
  <div class="static-box">Box 2</div>
  <div class="static-box">Box 3</div>
</div>

🎨 CSS

.static-box {
  position: static;
  width: 100px;
  height: 100px;
  background: #3498db;
}

📝 คำอธิบาย

Static คือค่าเริ่มต้นของ position ทุกองค์ประกอบใน HTML จะไม่ได้รับผลกระทบจาก top, bottom, left, right, z-index

Box 1

Box 2

Box 3

💡 ข้อสังเกต: Elements ถูกจัดเรียงตามลำดับปกติในเอกสาร ไม่มีการจัดตำแหน่งพิเศษ

2️⃣ Relative Positioning

📌 HTML

<div class="relative-container">
  <div class="relative-box">Normal</div>
  <div class="relative-box offset">Offset</div>
  <div class="relative-box">Normal</div>
</div>

🎨 CSS

.relative-box {
  position: relative;
  width: 100px;
  height: 100px;
}

.relative-box.offset {
  top: 10px;
  left: 15px;
  background: #f39c12;
}

📝 คำอธิบาย

Relative ทำให้องค์ประกอบสามารถเคลื่อนไหวจากตำแหน่งเดิมได้โดยใช้ top, bottom, left, right แต่ยังคงใช้พื้นที่เดิม

Normal

Offset

Normal

💡 ข้อสังเกต: Box ตรงกลางถูกเลื่อนออกไป แต่ยังคงครอบครองพื้นที่ดั้งเดิม

3️⃣ Absolute Positioning

📝 คำอธิบาย

Absolute ดึงองค์ประกอบออกจาก document flow และวางตำแหน่งโดยอ้างอิงกับ positioned parent หรือ viewport

Top
Left

Center

Bottom
Right

📌 HTML

<div class="demo-absolute">
  <div class="absolute-box box1">
    Top<br />Left
  </div>
  <div class="absolute-box box2">
    Center
  </div>
  <div class="absolute-box box3">
    Bottom<br />Right
  </div>
</div>

🎨 CSS

.demo-absolute {
  position: relative;
  height: 300px;
}

.absolute-box {
  position: absolute;
  width: 80px;
  height: 80px;
}

.box1 {
  top: 10px;
  left: 10px;
}

.box2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box3 {
  bottom: 10px;
  right: 10px;
}

💡 ข้อสังเกต: 3 Boxes สามารถทับซ้อนกันได้ และจัดตำแหน่งตามต้องการ

4️⃣ Fixed Positioning

📝 คำอธิบาย

Fixed วางองค์ประกอบ relative กับ viewport และยังคงที่เมื่อ scroll เนื้อหา

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui non impedit ex mollitia soluta sequi nesciunt recusandae ad! Expedita.

Scrollable content area - ลองเลื่อน scroll ลงมา ปุ่มด้านล่างจะยังอยู่ตำแหน่งเดิม

5️⃣ Sticky Positioning

📝 คำอธิบาย

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

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9 - ลองเลื่อน scroll

📌 HTML

<div class="demo-sticky">
  <div class="sticky-header">
    📌 Sticky Header
  </div>
  <div class="sticky-item">Item 1</div>
  <div class="sticky-item">Item 2</div>
  <div class="sticky-item">Item 3</div>
</div>

🎨 CSS

.sticky-header {
  position: sticky;
  top: 0;
  background: #3498db;
  color: white;
  padding: 15px;
  z-index: 10;
}

💡 ข้อสังเกต: Header ยังคงอยู่ที่ด้านบนเมื่อ scroll แต่จะหลุดออกเมื่อ scroll ออกจากองค์ประกอบแม่

6️⃣ Advanced: Stacking Context (Z-Index)

📝 คำอธิบาย

Z-Index ควบคุมลำดับการแสดงผลของ positioned elements บนแกน Z (ความลึก) ค่าที่สูงกว่าจะแสดงหน้าของค่าที่ต่ำกว่า

z-index: 3

z-index: 2

z-index: 1

📌 HTML

<div class="stacking-demo">
  <div class="z-layer z-layer1">
    z-index: 3
  </div>
  <div class="z-layer z-layer2">
    z-index: 2
  </div>
  <div class="z-layer z-layer3">
    z-index: 1
  </div>
</div>

🎨 CSS

.z-layer {
  position: absolute;
}

.z-layer1 {
  z-index: 3;
  top: 30px;
  left: 30px;
}

.z-layer2 {
  z-index: 2;
  top: 100px;
  left: 100px;
}

.z-layer3 {
  z-index: 1;
  top: 170px;
  left: 170px;
}

💡 ข้อสังเกต: Box สีแดง (z-index: 3) อยู่หน้าสุด ตามด้วยสีน้ำเงิน (z-index: 2) และสีเขียว (z-index: 1)

7️⃣ Advanced: Overlay Pattern

📝 คำอธิบาย

Overlay ใช้ position absolute เพื่อทับภาพหรือเนื้อหา ปกติใช้ rgba color เพื่อให้เห็นเนื้อหาด้านใต้

📸 ทับภาพ

📌 HTML

<div class="overlay-demo">
  <div class="overlay">
    📸 ทับภาพ
  </div>
</div>

🎨 CSS

.overlay-demo {
  position: relative;
  background: url('image.jpg');
  background-size: cover;
  height: 300px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

💡 ข้อสังเกต: ส่วนทับสามารถบดบังเนื้อหาด้านใต้ได้ บ่อยครั้งใช้สำหรับ image hero sections

8️⃣ Advanced: Simple Carousel

📝 คำอธิบาย

Carousel ใช้ position absolute เพื่อซ้อน slide ทั้งหมด และใช้ opacity + z-index เพื่อแสดง/ซ่อนสลับกัน

🔴 Slide 1

🔵 Slide 2

🟢 Slide 3

📌 HTML

<div class="carousel">
  <div class="carousel-container">
    <div class="carousel-item active">
      🔴 Slide 1
    </div>
    <div class="carousel-item inactive">
      🔵 Slide 2
    </div>
    <div class="carousel-item inactive">
      🟢 Slide 3
    </div>
  </div>
</div>

🎨 CSS

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}

.carousel-item.active {
  z-index: 10;
  opacity: 1;
}

.carousel-item.inactive {
  z-index: 0;
  opacity: 0;
}

💡 ข้อสังเกต: ในทางปฏิบัติ นี้จะใช้ JavaScript เพื่อสลับ .active class

9️⃣ Advanced: Floating Animation

📝 คำอธิบาย

Floating Animation รวม position absolute กับ CSS animation เพื่อสร้างเอฟเฟกต์ floating ที่ดูสวยงาม

1

2

3

📌 HTML

<div class="floating-demo">
  <div class="floating-element float-1">
    1
  </div>
  <div class="floating-element float-2">
    2
  </div>
  <div class="floating-element float-3">
    3
  </div>
</div>

🎨 CSS

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.floating-element {
  position: absolute;
  animation: float 3s 
    ease-in-out infinite;
}

💡 ข้อสังเกต: เอฟเฟกต์ floating ที่ลอยขึ้นลงช่วยให้ UI ดูมีชีวิตชีวา

🔟 Advanced: Tooltip

📝 คำอธิบาย

Tooltip ใช้ position absolute เพื่อแสดงข้อความเพิ่มเติมเมื่อ hover ปกติจะอยู่เหนือ trigger element

📌 HTML

<div class="tooltip-wrapper">
  <button class="tooltip-trigger">
    Hover me
  </button>
  <div class="tooltip">
    This is a tooltip!
  </div>
</div>

🎨 CSS

.tooltip-wrapper {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

💡 ข้อสังเกต: ลองนำเมาส์มาวางบน button เพื่อดู Tooltip

📊 สรุปเปรียบเทียบ Position Properties

Position	Relative to	Document Flow	Use Cases
static	Document flow	✅ Yes	Default positioning
relative	Original position	✅ Yes	Fine adjustments
absolute	Positioned parent	❌ No	Overlays, dropdowns
fixed	Viewport	❌ No	Floating buttons, navbars
sticky	Parent container	✅ Yes (until scroll)	Sticky headers

🎓 เคล็ดลับและสิ่งที่ต้องจำ

1. Parent Context สำคัญ
element ที่ position: absolute จะอ้างอิงกับ positioned parent (relative, absolute, fixed, sticky) หากไม่มี จะอ้างอิงกับ body

2. Z-Index ต้องมี Positioned Context
z-index จะไม่ทำงานกับ static elements ดังนั้น element ต้องมี position อื่นที่ไม่ใช่ static

3. Transform ช่วยจัดกึ่งกลาง
ใช้ transform: translate(-50%, -50%) กับ top/left 50% เพื่อจัดกึ่งกลางที่แท้จริง

4. Sticky ต้องมี Top/Bottom
position: sticky ต้องมี top หรือ bottom เพื่อบอก distance ที่ต้องติดขอบ

5. Performance ของ Fixed
fixed element มี performance cost สูง ควรลดการใช้ fixed elements ลง

🎯 CSS Positioning - ตั้งแต่พื้นฐานถึงซับซ้อน

1️⃣ Static Positioning (ค่าเริ่มต้น)

📝 คำอธิบาย

2️⃣ Relative Positioning

📝 คำอธิบาย

3️⃣ Absolute Positioning

📝 คำอธิบาย

4️⃣ Fixed Positioning

📝 คำอธิบาย

5️⃣ Sticky Positioning

📝 คำอธิบาย

6️⃣ Advanced: Stacking Context (Z-Index)

📝 คำอธิบาย

7️⃣ Advanced: Overlay Pattern

📝 คำอธิบาย

8️⃣ Advanced: Simple Carousel

📝 คำอธิบาย

9️⃣ Advanced: Floating Animation

📝 คำอธิบาย

🔟 Advanced: Tooltip

📝 คำอธิบาย

📊 สรุปเปรียบเทียบ Position Properties

🎓 เคล็ดลับและสิ่งที่ต้องจำ