我想要一个子元素位于父元素下方的元素前面,而不是让子元素的父元素位于另一个元素的前面。这可能还是有更好的解决方案?
滑块应该覆盖浅蓝色菜单而不是文本:)
我的代码:
ul {
position: absolute;
top: 200px;
left: 20px;
display: flex;
background: #00FFFF;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 20px #00FFBB;
margin: 0;
padding: 0;
}
ul li {
list-style: none;
width: 110px;
}
a {
display: block;
padding: 20px;
text-align: center;
font-family: arial;
color: #000;
z-index: 1;
transition: 0.5s;
text-decoration: none;
}
.slide {
position: absolute;
width: 110px;
height: 100%;
top: 0;
left: 0;
z-index: 0;
background: #00CFCF;
transition: 0.5s;
opacity: 0;
}
ul li:nth-child(1).active~.slide {
left: 0;
opacity: 1;
}
ul li:nth-child(2).active~.slide {
left: 110px;
opacity: 1;
}
ul li:nth-child(3).active~.slide {
left: 220px;
opacity: 1;
}
ul li:nth-child(4).active~.slide {
left: 330px;
opacity: 1;
}
ul li:nth-child(5).active~.slide {
left: 440px;
opacity: 1;
}
<ul>
<li class=""><a href="#">constant</a></li>
<li class="active"><a href="#">blink</a></li>
<li><a href="#">rainbow</a></li>
<li><a href="#">stack-led</a></li>
<li><a href="#">pong</a></li>
<li class="slide"></li>
</ul>
感谢您的帮助。
我试过使用 z-index 但不行,不起作用。我希望父母的孩子在父母下方的另一个元素之前。