Why is a nested z-index not working

Question

I have a overlay, which i want to display with some information. However, there is a button below the overlay which I want to display over the overlay. I have set the overlay with a z-index of 9998 and the button below it with a z-index of 9999, but it doesn't work. Is this possible at all?

.overlay-message {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: table;
    background-color: rgb(0, 0, 0);
    opacity: .9;
    z-index: 9998;
}
h4 { display: table-cell;
color: #fff;text-align: center;
vertical-align: middle; }
.container {
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
}
.row {
    display: table !important;
    align-items: center;
    justify-content: center;
}
    .one-fifth-flex {
        width: 50%;
        padding-bottom: 20px;
        float: left;
    }

    .ico-btn {
        background-color:transparent;
        color:rgb(26, 188, 156);
        border-color:rgb(26, 188, 156);
        border-style: solid;
        border-width: 10px;
        width:100px;
        z-index: 9999;
}

<div class="overlay-message">
      <h4>Hey! Tap on the button above!</h4>
</div>
<div class="container">
    <div class="row">
        <div class="one-fifth-flex">
            <div role="button"  class="ico-btn">
                Me
            </div>
        </div>
    </div>
</div>

Answer 1

You need to set the position property to relative, absolute or fixed on the button for z-index to be considered:

.overlay-message {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: table;
    background-color: rgb(0, 0, 0);
    opacity: .9;
    z-index: 9998;
}
h4 { display: table-cell;
color: #fff;text-align: center;
vertical-align: middle; }
.container {
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
}
.row {
    display: table !important;
    align-items: center;
    justify-content: center;
}
    .one-fifth-flex {
        width: 50%;
        padding-bottom: 20px;
        float: left;
    }

    .ico-btn {
        position: relative;
        background-color:transparent;
        color:rgb(26, 188, 156);
        border-color:rgb(26, 188, 156);
        border-style: solid;
        border-width: 10px;
        width:100px;
        z-index: 9999;
}

<div class="overlay-message">
      <h4>Hey! Tap on the button above!</h4>
</div>
<div class="container">
    <div class="row">
        <div class="one-fifth-flex">
            <div role="button"  class="ico-btn">
                Me
            </div>
        </div>
    </div>
</div>

Answer 2

As you got the answer by other seniors but just wanted to add why we require position property is to be set as relative, absolute or fixed.

Reference : https://css-tricks.com/almanac/properties/z/z-index/

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).

Elements can overlap for a variety of reasons, for instance relative positioning has nudged it over something else. Negative margin has pulled the element over another. Absolutely positioned elements overlap each other. All sorts of reasons.

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning.

The main point about stacking contexts is that z-index can be used to rearrange the stacking order of elements only inside their own stacking context. That entire stacking context has a stacking position within its stacking context that’s determined by its z-index property and those of its siblings in that parent stacking context. Elements from different stacking contexts are therefore never interleaved in the final stacking order (this is what the spec means when it says stacking contexts are “atomic”).

If you think in terms of the “painters algorithm”, where objects are painted onto a scene back-to-front, then a stacking context is like a painting within a painting. You first paint everything in the stacking context back-to-front in the proper order, then slap the whole result in wherever it belongs when you come to paint its parent context.

With no z-index, things do stack pretty much in DOM order but with positioned stuff above, but it’s also worth mentioning that floats are also brought in front of non-floats (but behind the positioned boxes).