子元素Z-index无法高于父元素？Bootstrap布局交互问题求助

你的核心问题是绝对定位的hold-btn层拦截了下方方块的点击事件，单纯调整z-index无法解决，因为堆叠上下文和元素覆盖逻辑需要配合处理。以下是两种可行的解决方案：

方案一：通过堆叠层级调整实现需求 #

利用z-index将hold-btn置于方块下方，按钮置于最上层，同时确保各元素的堆叠上下文正确。

修改后的代码 #

HTML（可保持原结构，或把hold-btn移到所有row之后，效果一致）

<div class="container game my-5">
    <div class="row">
        <div class="col square" id="a1" style="height: 40vh;"></div>
        <div class="col square" id="a2" style="height: 40vh;"></div>
    </div>
    <div class="row">
        <div class="col square" id="a3" style="height: 40vh;"></div>
        <div class="col square" id="a4" style="height: 40vh;"></div>
    </div>
    <div class="hold-btn w-100 h-100 d-flex align-items-center justify-content-center">
        <button class="btn px-4 py-4" id="button">Button</button>
    </div>
</div>

CSS

.game {
    position: relative;
    z-index: 1; /* 可选，确保容器不被页面其他元素覆盖 */
}

#a1 { background-color: rgb(74, 74, 223); }
#a3 { background-color: rgb(231, 56, 56); }
#a2 { background-color: rgb(45, 175, 45); }
#a4 { background-color: rgb(245, 245, 36); }

.hold-btn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; /* 将该层置于所有方块下方 */
}

.btn {
    background-color: rgb(175, 207, 207);
    z-index: 100; /* 按钮保持最上层 */
    position: relative; /* 必须设置position才能让z-index生效 */
}

.square {
    cursor: pointer;
    position: relative; /* 确保方块层级高于hold-btn */
}

原理说明 #

• hold-btn的z-index: -1使其在game容器的所有子元素（方块）下方，不会拦截点击事件
• 按钮设置position: relative和高z-index，脱离父容器的堆叠上下文，保持在最上层
• 方块的position: relative确保其层级高于hold-btn，可正常点击

方案二：通过点击穿透实现需求 #

不需要调整层级，直接让hold-btn不接收点击事件，点击会穿透到下方方块，同时保留按钮的点击能力。

修改后的CSS（HTML结构不变） #

.game {
    position: relative;
}

#a1 { background-color: rgb(74, 74, 223); }
#a3 { background-color: rgb(231, 56, 56); }
#a2 { background-color: rgb(45, 175, 45); }
#a4 { background-color: rgb(245, 245, 36); }

.hold-btn {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* 让该层不拦截任何点击事件 */
}

.btn {
    background-color: rgb(175, 207, 207);
    z-index: 100;
    pointer-events: auto; /* 单独恢复按钮的点击能力 */
    position: relative;
}

.square {
    cursor: pointer;
}

原理说明 #

• pointer-events: none让hold-btn完全忽略点击，点击动作会直接传递给下方的方块
• 按钮设置pointer-events: auto，确保自身可以正常接收点击事件

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