我不能让孩子的 Z-index 高于父母的

Question

So, simplifying my code, I have three elements. PS: I'm using Bootstrap for positioning.

1. A container with 2 rows, each row with 2 cols that sould be clickable .
2. Another div on top of this container, used to center a button exactly in the middle (vertically and horizontally) relative to the container.

Example: HTML:

    <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="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 class="row">
            <div class="col square" id="a3" style="height: 40vh;"></div>
            <div class="col square" id="a4" style="height: 40vh;"></div>
        </div>
    </div>

CSS:

.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;
}

.btn {
    background-color: rgb(175, 207, 207);
    z-index: 100;
}

.square {
    cursor: pointer;
}

My problem is: I can't get both the clickable cols AND the button to show on top of the container "game". I've tried using z-index, but with two results:

1. I can move the container "game" to the front, but then my button won't show.
2. I can move the button to the front, but then my cols will show but won't be clickable.
3. I can't figure out how to put elements in this order, from back to front: "1: div hold-btn, 2-container game, 3-button"

Any help, please? :(

Answer 1

Maybe it's just isolated on the back of its parent.

Try the style rule below, it may help:

isolation: isolate; // add this rule to element or its parent