网页重叠Book Now按钮Z-index设置失效问题求助

z-index失效属于前端常见的堆叠上下文规则问题，直接通过浏览器开发者工具即可定位修复，操作步骤如下： #

1. 检查按钮本身的定位属性 #

z-index仅对position值非static的元素生效，默认静态定位的元素会完全忽略z-index配置：

• 打开元素检查器选中目标Book Now按钮，查看样式面板的position属性
• 如果为默认static，新增如下样式即可：

/* 替换为你实际的按钮选择器 */
.page-book-service .hero-section .book-now-btn {
  position: relative;
  z-index: 999;
}

2. 排查父级堆叠上下文限制 #

如果调整按钮属性后仍不生效，说明按钮的父级容器创建了堆叠上下文，且该父容器的整体层级低于下方白色区块：

触发父级堆叠上下文的常见属性 #

只要父元素设置了以下任意一种属性，就会创建独立堆叠上下文，内部子元素的z-index只能在父容器内部排序，无法突破父容器的层级限制：

• opacity < 1
• transform、perspective、filter 不为none
• isolation: isolate
• 本身设置了非static定位 + z-index值

修复方法 #

向上遍历按钮的所有父元素，找到和下方白色区块同级的顶层父容器，将该父容器的层级设置为高于下方白色区块即可：

/* 替换为实际的容器选择器 */
.hero-banner-container {
  position: relative;
  z-index: 10;
}
/* 下方白色区块的选择器 */
.service-white-block {
  position: relative;
  z-index: 1;
}

验证方式 #

Chrome浏览器可以打开开发者工具的「Layers」面板，直观查看两个元素的堆叠高度，确认按钮所在层级在白色区块上方即可确认修复生效。

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