เหตุใด z-index จึงไม่ทำงาน

ดังนั้นถ้าฉันเข้าใจz-indexอย่างถูกต้องมันจะสมบูรณ์แบบในสถานการณ์นี้:

ฉันต้องการที่จะวางภาพด้านล่าง (แท็ก / บัตร) ด้านล่าง div ข้างต้นนั้น ดังนั้นคุณจะไม่เห็นขอบคม ฉันจะทำสิ่งนี้ได้อย่างไร

z-index:-1 // on the image tag/card

หรือ

z-index:100 // on the div above

ไม่ทำงานเช่นกัน ไม่มีการรวมกันของสิ่งใดเช่นนี้ มาทำไม

z-indexคุณสมบัติทำงานเฉพาะในองค์ประกอบที่มีpositionค่าอื่นที่ไม่ใช่static(เช่นposition: absolute;, position: relative;หรือposition: fixed)

นอกจากนี้ยังposition: sticky;มีการสนับสนุนใน Firefox นำหน้าด้วย Safari ทำงานใน Chrome เวอร์ชันเก่าภายใต้การตั้งค่าสถานะที่กำหนดเองและ Microsoft อยู่ระหว่างการพิจารณาเพื่อเพิ่มเบราว์เซอร์ Edge ของตน

สิ่งสำคัญ
สำหรับการวางตำแหน่งปกติอย่าลืมใส่position: relativeองค์ประกอบที่คุณตั้งไว้z-indexด้วย มิฉะนั้นจะไม่มีผล

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

บริบทการสแต็กมีลำดับชั้นและแต่ละบริบทการสแต็กถูกพิจารณาในลำดับการสแต็กของบริบทสแต็กของพาเรนต์

ดังนั้นด้วย html ต่อไปนี้

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

ไม่ว่าใหญ่z-indexของel3จะเป็นชุดก็มักจะอยู่ภายใต้el1เพราะผู้ปกครองมีบริบทซ้อนต่ำ คุณสามารถจินตนาการซ้อนเพื่อเป็นระดับที่ซ้อนคำสั่งของel3เป็นจริง3.8ซึ่งต่ำกว่า5

หากคุณต้องการตรวจสอบบริบทการซ้อนขององค์ประกอบหลักคุณสามารถใช้สิ่งนี้:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

มีบทความที่ดีเกี่ยวกับการซ้อนบริบทบน MDN

องค์ประกอบของคุณต้องมีpositionแอตทริบิวต์ (เช่นabsolute, relative, fixed) หรือz-indexจะไม่ทำงาน

ในหลายกรณีองค์ประกอบต้องถูกจัดตำแหน่งเพื่อz-indexให้ทำงานได้

แน่นอนการใช้position: relativeองค์ประกอบในคำถามน่าจะแก้ปัญหาได้ (แต่มีรหัสไม่เพียงพอที่จะรู้ได้อย่างแน่นอน)

อันที่จริงposition: fixed, position: absoluteและposition: stickyยังจะช่วยให้z-indexแต่ค่าเหล่านั้นยังเปลี่ยนรูปแบบ ด้วยposition: relativeรูปแบบจะไม่ถูกรบกวน

เป็นหลักตราบใดที่องค์ประกอบไม่ได้position: static(การตั้งค่าเริ่มต้น) จะถูกพิจารณาว่าอยู่ในตำแหน่งและใช้z-indexงานได้

คำตอบมากมายสำหรับ"ทำไม z-index จึงไม่ทำงาน" คำถามยืนยันว่าz-index ใช้งานได้กับองค์ประกอบที่มีตำแหน่งเท่านั้น ในฐานะของ CSS3 สิ่งนี้ไม่เป็นความจริงอีกต่อไป

องค์ประกอบที่เป็นรายการดิ้นหรือรายการตารางสามารถใช้z-indexแม้ในขณะที่เป็นpositionstatic

จากรายละเอียด:

4.3 Flex Item Z- การสั่งซื้อ

รายการ Flex สีเหมือนกับบล็อกแบบอินไลน์ยกเว้นการสั่งซื้อเอกสารที่สั่งการแก้ไขถูกนำมาใช้ในสถานที่ของการสั่งซื้อเอกสารดิบและz-indexค่าอื่น ๆ กว่าautoสร้างบริบทซ้อนแม้ว่ามีpositionstatic

5.4 การสั่งซื้อแกน Z: z-indexคุณสมบัติ

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

นี่คือตัวอย่างของz-indexการทำงานกับไอเท็มเฟล็กซ์ที่ไม่มีตำแหน่ง: https://jsfiddle.net/m0wddwxs/