如何解决.cta-card无法覆盖下方.footer元素的问题

问题1：.cta-card缺少白色背景 #

你的白色卡片未设置background-color，默认状态为透明，所以即便层级逻辑正确，也会透出下方页脚的背景色。

问题2：堆叠层级逻辑错误 #

• 默认情况下，静态定位（position: static，元素默认值）的元素会按DOM顺序堆叠，后面的元素会覆盖前面的元素。你的.footer是默认的static定位，因此即便.cta-card设置了z-index:2，由于.footer在DOM结构中更靠后，它会自然堆叠在.cta-card上方。
• 另外，z-index属性仅对非static定位的元素生效（relative/absolute/fixed/sticky），所以需要给.footer添加定位属性并设置更低的z-index，才能让.cta-card的层级设置生效。

修正后的CSS代码 #

.cta-card {
  position: relative;
  z-index: 2;
  margin-bottom: -25px;
  max-width: 50rem;
  border-radius: 15px; /* 修正语法错误：border radius → border-radius */
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.07);
  text-align: center;
  background-color: #fff; /* 添加白色背景，覆盖下方内容 */
}

.footer {
  position: relative; /* 添加相对定位，让z-index生效 */
  z-index: 1; /* 设置更低的层级，让卡片在上方 */
  max-width: 50rem;
  background-color: #0047AB;
  padding: 50px;
}

额外说明 #

• 修正了border radius的语法错误，正确写法为border-radius，否则圆角样式不会生效。
• 确保.cta-card的背景色不透明，才能完全覆盖下方的页脚背景。

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