ฉันเปิดคอนโซล (chrome \ firefox) และรันบรรทัดต่อไปนี้:

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");

#popupContent ควรอยู่เหนือสิ่งอื่นใด แต่ได้รับผลกระทบจากความทึบของ #popupFrame

เนื้อหาไม่มีอยู่ใน #popupFrame ซึ่งทำให้สิ่งนี้แปลกมาก

เป้าหมายคือการสร้าง firefox เช่น alert box

div ที่สองคือposition: static(ค่าเริ่มต้น) ดังนั้น z-index จึงไม่ใช้กับมัน

คุณต้องไปที่ตำแหน่ง (กำหนดตำแหน่งคุณสมบัติเพื่อสิ่งอื่นที่ไม่ใช่staticคุณอาจต้องการrelativeในกรณีนี้) สิ่งที่คุณต้องการที่จะให้z-indexไป

ความทึบจะเปลี่ยนบริบทของดัชนี z ของคุณเช่นเดียวกับการกำหนดตำแหน่งคงที่ เพิ่มความทึบให้กับองค์ประกอบที่ไม่มีหรือลบออกจากองค์ประกอบที่มี คุณจะต้องทำให้องค์ประกอบทั้งสองอยู่ในตำแหน่งคงที่หรือระบุตำแหน่งสัมพัทธ์หรือตำแหน่งสัมบูรณ์ นี่คือความเป็นมาของบริบท: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

คำถามเก่า แต่คำตอบนี้อาจช่วยใครบางคนได้

หากคุณกำลังพยายามแสดงเนื้อหาของคอนเทนเนอร์นอกขอบเขตของคอนเทนเนอร์ตรวจสอบให้แน่ใจว่าไม่มีoverflow:hiddenมิฉะนั้นสิ่งใด ๆ ที่อยู่ภายนอกจะถูกตัดออก

z-indexใช้กับองค์ประกอบที่ได้รับตำแหน่งที่ชัดเจนเท่านั้น เพิ่มposition:relativeใน #popupContent และคุณควรจะไป

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

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

นี่คือวิธีแก้ไขโดยใช้ตำแหน่งสัมพัทธ์:

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
  
  // Just add position relative;
  position: relative;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

Sandbox ที่นี่