小开

不透明度会改变 z-index 的上下文，静态定位也是如此。要么给没有透明度的元素添加透明度，要么从有透明度的元素中删除透明度。您还必须使两个元素静态定位，或者指定相对位置或绝对位置。下面是一些背景知识: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

小开

最佳答案

第二个 div 是 position: static(默认值) ，因此 z 索引不适用于它。

您需要定位(将 position 属性设置为除 static以外的任何值，在这种情况下您可能需要 relative)任何您想赋予 z-index的值。

小开

z-index仅适用于已给定显式位置的元素。将 position:relative添加到 # popupContent，应该就可以了。

小开

老问题，不过这个答案可能对某人有帮助。

如果您试图在容器的边界之外显示容器的内容，请确保它没有 overflow:hidden，否则它之外的任何内容都将被切断。

小开

我在使用 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>

沙盒在这里

小开

我也遇到过同样的问题，我试图用 appending解决这个问题，用 absolute position在 div中用 sticky position解决这个问题，我的问题是用快速拨号(reactjs + Materials) ，所以我不知道它是否适用于所有情况。

小开

这可能为时已晚，但它可以作为一种替代方法。在绝对位置显示元素的分层顺序取决于元素插入父元素的顺序。换句话说，不使用 z-index，可以通过添加 $(父)将其发送到后面。Prepend (me) ，并将其添加到前面，方法是将其添加到 $(father)。附(本人)。

function BringToFront(){
$("#parent").append($("#me"));
}


function SendToBack(){
$("#parent").prepend($("#me"));
}

#mySister{
position:absolute;
left:25px;
top:25px;
width:100px;
height:100px;
background-color: red;
}


#me{
position:absolute;
left:50px;
top:50px;
width:100px;
height:100px;
background-color: yellow;
}


#myBrother{
position:absolute;
left:75px;
top:75px;
width:100px;
height:100px;
background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="parent">


<div id="mySister">&nbsp;</div>


<div id="me">Hello! this is me!</div>
  

<div id="myBrother">&nbsp;</div>


</div>


<button type="button" onclick="BringToFront()">Bring to front</button>
<button type="button" onclick="SendToBack()">Send to back</button>

小开

如果你像我一样是个大笨蛋(但是你的定位规则是100% 正确的) ，试着去得到这样的东西:

看起来像这样:

您的解决方案可能非常简单，只需确保您的背景是没有透明的，您想要的元素位于其他元素的前面/后面。

Z-index 与绝对位置无关

这是如何使用位置相对来修正的:

沙盒在这里