嵌套div的z-index未正常生效问题求助

嘿，我来帮你理清楚这个z-index的问题～你遇到的情况其实是堆叠上下文在搞鬼，这是很多前端开发者都会踩的坑！

问题根源：父元素创建了独立的堆叠上下文 #

当你给父元素.sel_project_block设置了position: relative并且指定了z-index: 5时，它就创建了一个专属的堆叠上下文。在这个上下文里，所有子元素的z-index都是相对于父元素来计算的——哪怕你给子元素设z-index: 1，它也只会在父元素的堆叠层级内部排序，永远不会跑到父元素的下面。因为父元素是这个堆叠上下文的“根”，子元素属于这个上下文里的内容，层级再低也不会跳出这个范围。

两种可行的解决方案 #

方案一：移除父元素的z-index，借助外部容器实现层级控制

把父元素的z-index去掉（让它回到默认的auto），这样父元素就不会创建独立的堆叠上下文。然后给父元素套一个外层容器，把原来父元素的z-index移到这个容器上，再把子元素的z-index设为负数，就能让子元素显示在父元素下方了。

修改后的代码示例：

/* 新增外层容器 */
.project-container {
  position: relative;
  z-index: 5; /* 原来父元素的z-index移到这里 */
}

/* 修改后的父元素样式 */
.sel_project_block {
  background-color: #f5876e;
  border-radius: 14px;
  margin-right: 150px;
  width: 239px;
  height: 34px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  box-shadow: 1px 3px 7px #000;
  /* 移除z-index，避免创建堆叠上下文 */
}

/* 修改后的子元素样式 */
.additional {
  max-width: 185px;
  position: absolute;
  top: 76.2%;
  right: 22.05%;
  z-index: -1; /* 设置为负数，就能跑到父元素下方 */
  color: #67573e;
  background-color: #fff;
  border: 1px solid #978d7e;
  font-size: 16px;
  width: 185px;
}

对应的HTML结构：

<div class="project-container">
  <div class="sel_project_block">
    <!-- 父元素原有内容 -->
  </div>
  <div class="additional">
    <!-- 子元素原有内容 -->
  </div>
</div>

方案二：把子元素移到父元素外部，作为同级元素控制层级

如果父元素必须保留z-index（也就是必须创建堆叠上下文），那可以把子元素从父元素的DOM结构中移出来，变成同级元素，然后通过调整两者的z-index来控制堆叠顺序。

示例代码：

.sel_project_block {
  /* 保留你原来的所有样式 */
  background-color: #f5876e;
  border-radius: 14px;
  margin-right: 150px;
  width: 239px;
  height: 34px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  box-shadow: 1px 3px 7px #000;
  z-index: 5;
}

.additional {
  max-width: 185px;
  position: absolute;
  /* 这里需要根据父元素的位置调整定位值，让它保持原来的视觉位置 */
  top: [父元素的top偏移 + 76.2%];
  right: [父元素的right偏移 + 22.05%];
  z-index: 1; /* 作为同级元素，z-index 1 < 5，会显示在父元素下方 */
  color: #67573e;
  background-color: #fff;
  border: 1px solid #978d7e;
  font-size: 16px;
  width: 185px;
}

对应的HTML结构：

<div class="sel_project_block">
  <!-- 父元素原有内容 -->
</div>
<div class="additional">
  <!-- 子元素原有内容 -->
</div>

额外小贴士 #

除了position + z-index，还有很多情况会创建堆叠上下文，比如设置transform、opacity < 1、filter等属性时。以后遇到z-index不生效的情况，先检查元素是否处于某个独立的堆叠上下文中，这通常是问题的关键～

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