相对定位元素无法覆盖其他元素是因为默认层叠顺序未提升，需通过设置z-index值来控制层级；示例中为.overlay设置z-index:10、.underneath设置z-index:5后，前者会覆盖后者；若仍无效，可能是祖先元素创建了独立层叠上下文（如opacity
当使用CSS相对定位（position: relative）的元素无法覆盖其他元素时，通常是因为层叠顺序（stacking order）的问题。即使元素已经定位，它的显示层级默认与其他普通元素相同，导致被后渲染或更高层级的元素遮挡。解决这个问题的关键是调整 z-index 属性。
为什么相对定位元素不能覆盖其他元素？
元素设置为 position: relative 后，虽然可以脱离正常的文档流进行偏移，但不会自动提升其在Z轴上的层级。浏览器按照默认的绘制顺序渲染页面，后来的定位元素或某些具有更高默认层级的元素（如 position: fixed 或设置了 z-index 的元素）可能会覆盖它。
使用 z-index 控制层叠顺序
要让相对定位的元素覆盖其他元素，需要显式设置 z-index 值，并确保父级结构没有影响层叠上下文的限制。
- 给目标元素设置 position: relative 和一个较高的 z-index 值
- 确保被覆盖的元素 z-index 更低或未设置
- 注意：只有定位元素（relative, absolute, fixed, sticky）才支持 z-index
示例代码：
立即学习“前端免费学习笔记（深入）”；
.overlay {
position: relative;
z-index: 10;
background: red;
}
.underneath {
position: relative;
z-index: 5;
background: blue;
}
此时 .overlay 元素会覆盖 .underneath 元素。
检查层叠上下文是否被干扰
有时候即使设置了更高的 z-index 也无法覆盖，可能是因为祖先元素创建了独立的 层叠上下文。常见触发条件包括：
- 设置了 opacity 小于 1
- 使用了 transform（如 scale、rotate）
- 设置了 will-change 或 filter
- 父元素有 z-index 且定义了定位属性
这些情况会导致子元素的 z-index 只在该上下文中有效，无法与外部元素比较层级。解决方案是统一调整相关祖先元素的层级关系，或重构布局避免冲突。
基本上就这些——只要确保元素定位且 z-index 设置合理，同时注意层叠上下文的影响，相对定位元素就能正常覆盖其他内容。
