如何将嵌套在div内的div置于另一个div之上？

完全可以实现，只需要调整CSS的定位和层级属性即可。

问题说明 #

我有一个外层div（class为first），里面嵌套了一个包含图片的内层div，希望这个内层div能叠在第二个div（class为second，对应图中的红色区域）上方，让箭头图片覆盖红色区域。

原代码分析 #

原代码中箭头图片设置了position: absolute和z-index:2，但外层.first没有设置定位，导致图片的绝对定位是相对于整个文档视口，无法精准控制位置；同时如果第二个div有定位属性，可能会出现层级覆盖问题。

修改后的代码 #

CSS 代码

.first {
  position: relative; /* 让内部绝对定位元素相对于当前容器定位 */
  background: #eee;
  height: 100px; /* 示例高度，可根据实际需求调整 */
}

.puscicaAnimacija {
  bottom: -2%;
  height: 5%;
  margin-bottom: -10px;
  z-index: 2;
  position: absolute;
}

.second {
  background: red; /* 对应红色区域 */
  height: 100px;
  /* 如果给.second添加了position属性（如relative），需设置z-index低于图片 */
  /* position: relative; */
  /* z-index: 1; */
}

HTML 代码

<div class="first">
  <div style="display: flex; justify-content: center;">
    <img src="https://via.placeholder.com/100" class="puscicaAnimacija" />
  </div>
</div>

<div class="second">
</div>

关键调整点 #

• 给.first添加position: relative：让内部的绝对定位图片相对于.first容器定位，确保箭头出现在容器底部区域。
• 层级控制：如果.second设置了position属性（如relative），需要给它设置比图片更低的z-index（比如1），这样图片的z-index:2就能覆盖在它上方；若.second是默认的static定位，绝对定位的图片会天然处于更高层级，无需额外设置。

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