การจัดตำแหน่ง: relative, absolute, fixed, sticky, z-index

ยึดป้าย ส่วนหัว และโมดัลให้อยู่ตรงตำแหน่งที่คุณต้องการพอดีด้วยตำแหน่งของ CSS และสเกล z-index ที่จัดการอย่างเป็นระบบ

8 นาที · 3 คำถาม

ตามค่าเริ่มต้น ทุกอีลิเมนต์คือ position: static และไหลไปตามลำดับของเอกสาร position: relative มีสองการใช้งาน ขยับอีลิเมนต์เล็กน้อยโดยไม่รบกวนเพื่อนบ้าน และเหนือสิ่งอื่นใดคือ ทำหน้าที่เป็นจุดอ้างอิง ให้กับลูกที่มี position: absolute มันคือรูปแบบการจัดตำแหน่งที่พบบ่อยที่สุด ป้ายโปรโมชัน ทูลทิป หรือไอคอนที่ยึดไว้ที่มุมของพ่อแม่

.product-card {
  position: relative;
}

.promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

position: fixed ตรึงอีลิเมนต์ไว้กับ viewport ไม่ว่าจะเลื่อนหน้าอย่างไร แบนเนอร์คุกกี้ ปุ่มกลับขึ้นด้านบน ส่วน position: sticky เป็นแบบผสม อีลิเมนต์จะเลื่อนไปตามหน้าปกติ จากนั้น ล็อกอยู่กับที่เมื่อไปถึงจุดขีดจำกัด ที่คุณกำหนด (ตัวอย่างเช่น top: 0) มันคือทางออกสมัยใหม่สำหรับส่วนหัวที่ต้องการให้มองเห็นอยู่ตลอด

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

เมื่ออีลิเมนต์ซ้อนทับกัน z-index จะตัดสินว่าตัวใดอยู่ด้านบน แต่ใช้ได้เฉพาะกับอีลิเมนต์ที่มีตำแหน่งเท่านั้น ให้ใช้ สเกลที่มีเอกสารกำกับ แทนค่าที่สุ่มขึ้นมา 10 สำหรับเมนูดรอปดาวน์ 100 สำหรับส่วนหัว 1000 สำหรับโมดัล ระวัง พ่อแม่ที่สร้าง stacking context ของตัวเอง (ตัวอย่างเช่นด้วย opacity ที่ต่ำกว่า 1) จะจำกัด z-index ของลูกทั้งหมด

.dropdown {
  z-index: 10;
}

.site-header {
  z-index: 100;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. อีลิเมนต์ position: absolute จัดตำแหน่งตัวเองโดยอ้างอิงกับอะไร
   • อ้างอิงกับหน้าต่างเบราว์เซอร์เสมอ
   • อ้างอิงกับบรรพบุรุษที่มีตำแหน่งที่ใกล้ที่สุด มิฉะนั้นก็ viewport
   • อ้างอิงกับพ่อแม่โดยตรง ไม่ว่าตำแหน่งของมันจะเป็นอย่างไร
2. ความแตกต่างระหว่าง fixed และ sticky คืออะไร
   • fixed ตรึงอยู่กับหน้าจอเสมอ ส่วน sticky ล็อกอยู่กับที่ก็ต่อเมื่อเลื่อนถึงจุดขีดจำกัดเป็นต้นไป
   • sticky เรนเดอร์ได้เร็วกว่า fixed
   • ไม่มีความแตกต่าง ทั้งสองเป็นคำที่มีความหมายเหมือนกัน
3. เหตุใด z-index: 999 จึงอาจไม่มีผลใด ๆ
   • เพราะค่าสูงสุดที่อนุญาตคือ 100
   • เพราะอีลิเมนต์ไม่มีตำแหน่ง หรือถูกกักอยู่ใน stacking context ที่ต่ำกว่า
   • เพราะ z-index ทำงานได้กับ Grid เท่านั้น