CSS背景遮罩影响标题文本求助：保留min-height并恢复标题颜色

先看一下当前页面的效果：

问题原因分析 #

你遇到的问题核心在于z-index的生效规则和绝对定位元素的层级关系：

1. 你的.bg-overlay设置了z-index:0，但标题所在的.heading元素默认是static定位，所以给h2加的z-index:2根本不会生效，导致标题被遮罩覆盖，颜色变暗。
2. row里的内容看似没受影响，只是浏览器层级渲染的偶然表现，并不稳定。
3. 如果把所有元素都放到.bg-overlay里，因为.bg-overlay是absolute定位，不会占据父元素空间，#popular-packages的min-height就会失效，父元素高度直接塌陷。

两种简单有效的解决方案 #

方案一：给标题容器设置定位与层级

只需要修改.heading的CSS，给它加上定位和z-index，让它的层级高于遮罩：

#popular-packages .heading{
  padding-top:15vh;
  position: relative; /* 必须设置非static定位，z-index才会生效 */
  z-index: 2; /* 数值大于.bg-overlay的z-index(0)即可 */
}

这种方法不用改动HTML结构，能完整保留#popular-packages的min-height，标题也会正常显示白色。

方案二：降低遮罩的层级（更简洁）

直接把.bg-overlay的z-index改成-1，让它自动跑到父容器所有内容的下方：

.bg-overlay{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.4);
  z-index: -1; /* 修改这里 */
}

这种方法不需要修改任何其他元素的样式，因为父容器#popular-packages是relative定位，子元素的z-index:-1会被渲染在父元素内容的底层，所有内容（包括标题和套餐卡片）都会自动显示在遮罩上方，同时min-height完全不受影响。

为什么这两种方案都能解决问题？ #

• 方案一利用了z-index仅对非static定位元素生效的规则，给标题容器设置position:relative后，它的z-index就能覆盖遮罩的层级。
• 方案二利用了父容器为relative时，子元素z-index为负会落在父内容下方的特性，从根源上避免了遮罩覆盖内容的问题，代码更简洁。

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