如何将绝对定位元素置于同级元素子元素之间？（Vue-Slick-Carousel场景）

要实现你需要的层级关系（文本>云朵>人物图片），核心是确保定位上下文正确，同时让z-index对目标元素生效，具体调整如下：

关键修改点 #

• 给云朵的父容器.banner__slider设置position: relative，为云朵的绝对定位提供正确的参考容器，同时建立统一的定位上下文，让所有元素的z-index在同一层级比较。
• 给.slide__text添加position: relative，因为z-index仅对非static定位的元素生效，这样它的层级才能覆盖云朵。
• 按需求设置三个元素的z-index值。

修改后的样式代码 #

img {
  max-width: 100%;
}

.slick-slide > div {
  display: flex;
  justify-content: center;
}

.slide {
  max-width: 500px;
  border: 2px solid orange;
  padding: 1rem;
  position: relative;
}

.slide .slide__text {
  border: 2px solid green;
  padding: 8px;
  position: relative; /* 关键：让z-index生效 */
  z-index: 2;
}

.slide__person {
  z-index: 0;
  position: relative; /* 确保z-index生效 */
}

.banner__slider {
  position: relative; /* 关键：为云朵提供定位上下文 */
}

.banner__slider-cloud {
  border: 1px solid;
  max-width: 960px;
  margin: auto;
  position: absolute;
  right: 0;
  left: 0;
  top: 5%;
  z-index: 1; /* 层级介于文本和人物之间 */
}

原理说明 #

1. 定位上下文：当父元素设置position: relative后，子元素的绝对定位会相对于该父元素，同时所有子元素的z-index会在这个父元素的上下文中进行比较，避免了不同上下文导致的层级失效。
2. z-index生效条件：只有元素设置了position: relative/absolute/fixed/sticky时，z-index属性才会起作用，所以必须给文本和人物图片添加定位属性。
3. 云朵静态：因为云朵是放在.banner__slider容器内、滑块组件之外，且使用绝对定位相对于该容器，所以滑块切换时云朵不会跟随移动，保持静态。

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