CSS实现子元素置于父元素下方元素之上且父元素不前置的方案

核心问题分析 #

当前问题的关键在于z-index的堆叠上下文规则：父元素ul是position: absolute，会创建独立的堆叠上下文，内部子元素的z-index仅在该上下文内生效。而你设置的<a>标签没有定位属性（非relative/absolute/fixed/sticky），导致z-index:1不生效，滑块.slide就会盖住文字。

另外你提到的"子元素显示在父元素下方的元素前面，同时不将父元素置于该元素上层"——只要避开父元素创建强制堆叠上下文的属性，调整元素层级就能实现，结合你的菜单场景，先解决滑块遮挡问题。

修复后的代码 #

CSS 代码 #

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;
  position: relative; /* 给li设置相对定位，为内部a的z-index提供生效环境 */
}

a {
  display: block;
  padding: 20px;
  text-align: center;
  font-family: arial;
  color: #000;
  position: relative; /* 必须设置定位属性，z-index才会生效 */
  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;
}

HTML 代码（无需修改） #

<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>

关键修改说明 #

• 给<li>和<a>添加position: relative：只有定位元素（非static）的z-index才会生效，这样<a>的z-index:1就能压在滑块（z-index:0）上方，保证文字不被遮挡。
• 滑块作为ul的子元素，利用父元素的overflow: hidden实现圆角裁剪，同时滑块的z-index:0在父元素堆叠上下文内处于<a>下方，刚好覆盖菜单背景。

关于"子元素显示在父元素下方元素前面"的补充 #

如果需要让子元素跑到父元素外部，同时显示在父元素下方的其他元素前面，只要父元素不设置z-index、opacity<1、transform等会创建堆叠上下文的属性，子元素用position: absolute并设置合适的z-index即可。比如父元素不设z-index，子元素设z-index:-1，就能跑到父元素下方，且会显示在父元素下方其他z-index更低的元素上方。

内容的提问来源于stack exchange，提问作者Benjamin