设置z-index后文本无法显示在红色伪元素上方的问题求助

一、z-index失效原因及修复 #

你设置的.text的z-index不生效，核心原因是：

• .wrapper__img-outer是position: relative，它的:after伪元素属于父元素的生成内容，层级归属于父元素的堆叠上下文。
• .text的父元素.wrapper__img-bottom没有设置position属性，.text的z-index无法创建独立的堆叠上下文，因此即便数值再大，也会被父元素的伪元素覆盖。

修复代码：给.text添加position: relative即可：

.text {
  z-index: 10;
  position: relative; /* 新增这一行 */
}

也可以给父元素.wrapper__img-bottom设置position: relative，同样能让内部.text的层级生效。

二、红色底部元素及内边距的更优实现 #

用伪元素实现底部红色块容易引发层级冲突，更直观易维护的方案是直接利用结构元素实现：

1. 删掉.wrapper__img-outer的:after伪元素代码
2. 给.wrapper__img-bottom设置红色背景、固定高度和内边距，借助flex布局自动贴在容器底部

优化后的完整代码：

CSS #

.wrapper {
  margin: 0 auto;
}

.wrapper__img-outer {
  padding: 10px;
  height: 190px;
  width: 330px;
  background: center / cover no-repeat url("https://place-hold.it/330x190");
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box; /* 确保padding不会额外撑大容器 */
}

/* 直接用底部容器实现红色块 */
.wrapper__img-bottom {
  background-color: red;
  height: 54px;
  padding: 0 10px; /* 按需设置内边距 */
  display: flex;
  align-items: center; /* 让文本垂直居中 */
}

.text {
  /* 无需额外z-index，天然在红色背景上方 */
  color: #fff; /* 可选：设置白色文本更醒目 */
}

HTML #

<div class="wrapper">
  <div class="wrapper__img-outer">
    <div class="wrapper__img-top">
      <p class="text">text</p>
    </div>
    <div class="wrapper__img-bottom">
      <p class="text">text</p>
    </div>
  </div>
</div>

这种方案的优势：

• 结构清晰，红色块与文本属于同一层级容器，完全避免层级遮挡问题
• 内边距直接给.wrapper__img-bottom设置，调整更灵活
• 无需依赖伪元素的定位逻辑，减少布局冲突风险

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