如何实现兄弟元素滑动覆盖：黄元素仅覆红元素且不用z-index？

嘿，这个需求完全可以不用z-index搞定！核心是利用CSS的堆叠上下文特性，通过元素的包裹关系来隔离堆叠层级，完美解决你遇到的问题。

单个组的实现思路 #

首先，把需要互相覆盖的黄色和红色元素放进同一个独立父容器，蓝色元素放在这个父容器外面。这样父容器会形成一个专属的堆叠上下文，里面的黄红元素只会在这个上下文里堆叠，永远不会跑到外面的蓝色元素上方。

举个实际的代码例子：

<!-- 蓝色元素单独存在，不在任何堆叠上下文容器内 -->
<div class="blue-box">蓝色元素</div>

<!-- 黄红元素的专属父容器，触发堆叠上下文 -->
<div class="item-group">
  <div class="red-box">红色元素</div>
  <div class="yellow-box">黄色元素</div>
</div>

对应的CSS：

.blue-box {
  width: 300px;
  height: 100px;
  background: blue;
  /* 蓝色元素不需要特殊定位，保持默认流即可 */
}

.item-group {
  position: relative; /* 关键：触发堆叠上下文，隔离内部元素的堆叠 */
  width: 300px;
  height: 100px;
  margin-top: 20px;
}

.red-box {
  width: 100%;
  height: 100%;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

.yellow-box {
  width: 100%;
  height: 100%;
  background: yellow;
  position: absolute;
  top: 0;
  left: -100%; /* 初始在红色元素左侧 */
  transition: left 0.5s ease; /* 滑动动画 */
}

/* 模拟滑动触发效果 */
.item-group:hover .yellow-box {
  left: 0;
}

这个结构里，黄色元素的滑动完全被限制在.item-group内部，无论怎么动都不会覆盖外面的蓝色元素。

多组元素的复用方案 #

如果要做多组黄红元素，只需要给每组都套一个独立的.item-group容器就行。每个容器都是独立的堆叠上下文，各组的黄色元素只会覆盖自己组内的红色元素，不会干扰其他组，更不会碰蓝色元素：

<div class="blue-box">蓝色元素</div>

<div class="item-group">
  <div class="red-box">红色组1</div>
  <div class="yellow-box">黄色组1</div>
</div>

<div class="item-group">
  <div class="red-box">红色组2</div>
  <div class="yellow-box">黄色组2</div>
</div>

CSS完全复用上面的代码就行，每组的滑动逻辑都是独立的，不会互相影响。

为什么之前会覆盖蓝色？ #

你之前的问题大概率是黄红元素和蓝色元素都是同级元素，没有堆叠上下文隔离。当黄色元素设置了position: absolute/relative后，它的堆叠层级会比默认流的蓝色元素高，就会出现覆盖。而用父容器触发堆叠上下文后，内部元素的堆叠被“锁”在容器里，外部元素的层级不受影响。

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