CSS Academy · บทเรียน

Z-index และบริบทการซ้อน

ควบคุมว่าองค์ประกอบใดปรากฏอยู่ด้านบนด้วย z-index และทำความเข้าใจบริบทการซ้อน

Z-index และบริบทการซ้อน เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

z-index คืออะไร

z-index ควบคุมลำดับการซ้อนขององค์ประกอบที่กำหนดตำแหน่งตามแกน Z (จากด้านหน้าไปด้านหลัง) เมื่อองค์ประกอบซ้อนทับกัน ค่าที่สูงกว่าจะแสดงอยู่ด้านบนค่าที่ต่ำกว่า

z-index ใช้ได้เฉพาะกับองค์ประกอบที่กำหนดตำแหน่ง

z-index ไม่มีผลกับองค์ประกอบที่มี position: static (ค่าเริ่มต้น) องค์ประกอบต้องมีค่า relative, absolute, fixed หรือ sticky จึงจะใช้ z-index ได้

<div class="popup">Popup (position + z-index)</div>

ลำดับการซ้อนเริ่มต้น

หากไม่ได้กำหนด z-index อย่างชัดเจน องค์ประกอบจะซ้อนกันตามลำดับนี้ (จากด้านหลังไปด้านหน้า):

พื้นหลังขององค์ประกอบราก
องค์ประกอบระดับบล็อก (ตามลำดับในโฟลว์)
องค์ประกอบลอย
องค์ประกอบอินไลน์
องค์ประกอบที่กำหนดตำแหน่งและมี z-index เป็น auto หรือ 0

บริบทการซ้อน

บริบทการซ้อน คือชั้นขององค์ประกอบที่ใช้แกน z ร่วมกัน ค่า z-index จะแข่งขันกันได้เฉพาะภายในบริบทการซ้อนเดียวกัน องค์ประกอบภายในบริบทการซ้อนไม่สามารถวางไว้เหนือองค์ประกอบภายนอกบริบทนั้นได้ ไม่ว่าค่า z-index จะเป็นเท่าใด

สิ่งใดทำให้เกิดบริบทการซ้อน

สิ่งต่อไปนี้จะสร้างบริบทการซ้อนใหม่:

position + z-index ที่ไม่ใช่ auto
opacity น้อยกว่า 1
มีการใช้ transform, filter หรือ perspective
ใช้ will-change กับพร็อพเพอร์ตีบางรายการ
isolation: isolate
องค์ประกอบลูกของเฟล็กซ์หรือกริดที่มี z-index

การแยกบริบทการซ้อน

ใช้ isolation: isolate เพื่อสร้างบริบทการซ้อนโดยตั้งใจ โดยไม่ทำให้เกิดผลทางภาพใด ๆ เหมาะสำหรับคอมโพเนนต์ส่วนติดต่อผู้ใช้ที่ต้องควบคุมชั้น z-index ของตนเอง

<div class="modal-wrapper">Isolated stacking context</div>

ปัญหาสเกล z-index

โครงการต่าง ๆ มักประสบปัญหา "สงคราม z-index" ซึ่งนักพัฒนาต่างแข่งกันเพิ่มค่าเป็น 9999 หรือ 99999 วิธีแก้คือกำหนดสเกล z-index ที่มีชื่อเรียก โดยใช้ตัวแปรของ CSS:

<p>Custom properties define a z-index scale used across the app.</p>

z-index ติดลบ

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

<div class="card">Card with a decorative gradient layer behind it</div>

การแก้ไขปัญหาการซ้อน

เมื่อหน้าต่างโมดัลหรือกล่องคำแนะนำปรากฏอยู่ด้านหลังองค์ประกอบอื่น สาเหตุมักเป็นบริบทการซ้อนบนองค์ประกอบบรรพบุรุษที่มี z-index ต่ำ ใช้ 3D View ของ DevTools หรือ ตรวจสอบค่า opacity, transform และ filter บนองค์ประกอบแม่

z-index ในเฟล็กซ์และกริด

รายการของเฟล็กซ์และกริดสามารถใช้ z-index ได้โดยตรง โดยไม่ต้องกำหนด position อย่างชัดเจน เบราว์เซอร์จะถือว่ารายการเหล่านี้มีการกำหนดตำแหน่งแล้วเพื่อใช้จัดลำดับการซ้อน

<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>

หน้าต่างโมดัลแบบตรึงและ z-index

หน้าต่างโมดัลควรเป็นองค์ประกอบลูกโดยตรงของ <body> (หรืออยู่ในตัวห่อระดับบนสุด) เพื่อหลุดออกจากบริบทการซ้อนขององค์ประกอบบรรพบุรุษ องค์ประกอบ HTML <dialog> จัดการเรื่องนี้ให้โดยอัตโนมัติในชั้นบนสุดของเบราว์เซอร์

ตรวจสอบอย่างรวดเร็ว

องค์ประกอบที่ทับซ้อนกันสองรายการต่างมี z-index: 100 แต่อยู่ในบริบทการซ้อนขององค์ประกอบแม่คนละบริบท อะไรเป็นตัวกำหนดว่าองค์ประกอบใดจะปรากฏอยู่ด้านบน

สรุปทบทวน

z-index ควบคุมการซ้อนด้านหน้าไปด้านหลังขององค์ประกอบที่กำหนดตำแหน่ง บริบทการซ้อนจะแยกการแข่งขันของ z-index ออกจากกัน ทุกสิ่งที่สร้างบริบทการซ้อนบนองค์ประกอบแม่สามารถกักค่า z-index ขององค์ประกอบลูกไว้ได้ ใช้ isolation: isolate เพื่อสร้างขอบเขตอย่างชัดเจน และใช้ตัวแปรของ CSS สำหรับกำหนดสเกล z-index

คำถามที่พบบ่อย

บทเรียน “Z-index และบริบทการซ้อน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Z-index และบริบทการซ้อน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Z-index และบริบทการซ้อน”

ควบคุมว่าองค์ประกอบใดปรากฏอยู่ด้านบนด้วย z-index และทำความเข้าใจบริบทการซ้อน คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “Z-index และบริบทการซ้อน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ CSS Academy