How are z-index
and opacity
related when deciding stacking order of an element in HTML?
when i keep opacity
less than 1
on an element which is having some z-index
say 999
. The element is going behind the element which is having no z-index
.
$(function() {
$("#checkbox1").on("change", function() {
$("#green-parent").toggleClass("add-opacity", this.checked);
});
});
.green,
.blue {
position: absolute;
width: 100px;
line-height: 100px;
text-align: center;
color: white;
}
.green {
z-index: 999999999;
top: 50px;
left: 50px;
background: green;
}
.blue {
top: 60px;
left: 90px;
background: blue;
}
.add-opacity {
opacity: 0.99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="checkbox1" type="checkbox" value="1">
<label for="checkbox1">Add opacity to green box parent</label>
<div id="green-parent">
<span class="green">Green</span>
</div>
<div>
<span class="blue">Blue</span>
</div>
Positioned elements with a z-index value other than "auto" and elements with an opacity value less than 1 generate a stacking context. Refer to the rules regarding the painting order.
In your first example we have the root stacking context with various descendants including:
auto
z-indexThe blue box with auto
z-index is placed behind; green box with positive z-index is placed in front (see rule no. 8 and 9).
In your second example we have:
Both elements fall under same category (see rule no. 8). In which case the HTML order determines which element appear in front. The blue box appears later in the source order so it appears in front.
Aside from the opacity
stacking context Alexey Ten pointed out in his comment (which is a factor here), the z-index
is relative to the element's container. In this case, both your blue and green elements are contained within separate div
parents which have no defined z-index
. Due to the HTML ordering, the latter div
(the one with the blue box) will appear on top of the former one (the green one).
In this below example, I've added the class .first
to the first parent div
and .second
to the second one, then given them their own z-index
properties.
.green, .blue {
position: absolute;
width: 100px;
color: white;
line-height: 100px;
text-align: center;
}
.green {
z-index:999999999;
top: 90px;
left: 60px;
background: green;
}
.gp{
opacity:0.99;
}
.blue {
top: 100px;
left: 100px;
background: blue;
}
.first, .second {
position: relative;
}
.first {
z-index: 2;
}
.second {
z-index: 1;
}
<div class="first">
<span class="green">Green</span>
</div>
<div class="second">
<span class="blue">Blue</span>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With