如何使嵌套div中的图片重叠覆盖另一个section元素？

看起来你已经尝试了基础的position和z-index设置，但没达到预期效果，大概率是堆叠上下文或者元素位置重叠的问题，我来帮你梳理下解决方案：

先分析问题根源 #

你给两个Section都加了position: relative和z-index，但没生效的可能原因有两个：

1. 上方Section里的图片容器（.sub-masthead-item__image-container）可能创建了自己的堆叠上下文，导致父级的z-index无法控制它的层级；
2. 下方的.qualifiers--Q1 Section没有和上方Section产生重叠，就算z-index更高，也看不到覆盖效果。

具体解决方案 #

1. 确保元素重叠 #

首先要让两个Section在视觉上重叠，给下方Section添加负margin或者调整top值，比如：

.qualifiers--Q1 {
  position: relative;
  z-index: 3;
  /* 根据你的布局调整这个值，让它向上移动覆盖上方的图片区域 */
  margin-top: -80px; 
}

2. 调整图片容器的堆叠层级 #

如果上方图片还是在最上层，那大概率是图片容器创建了独立的堆叠上下文，这时候给它设置更低的z-index：

.sub-masthead--TC2 {
  position: relative;
  z-index: 1; /* 保持父级的z-index */
}

.sub-masthead-item__image-container {
  position: relative; /* 如果这个容器原本没有position，加上它 */
  z-index: -1; /* 让图片容器的层级低于父级，这样下方Section的z-index:3就能覆盖它 */
}

额外检查点 #

• 确认上方的.sub-masthead--TC2没有设置overflow: hidden，否则会裁剪内部元素，导致无法被下方Section覆盖；
• 如果图片本身有设置position属性，也要同步调整它的z-index，确保它的层级低于下方Section。

按照这个思路调整后，应该就能实现你想要的下方Section覆盖上方图片的效果了。

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