Stacking order of elements affected by opacity
How are related z-index
and opacity
when choosing the stacking order of an element in HTML?
when i save opacity
less 1
on an element that has some z-index
say 999
. Element follows an element that does not have 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>
source to share
Positioned elements with a z-index value other than "auto" and elements with an opacity less than 1 generate a stacking context. Refer to the paint order rules .
In the first example, we have a root stack context with various descendants, including:
- positioned green box with positive z-index
- located blue box with
auto
z-index
A blue box with a auto
z-index is placed in the back; a green square with a positive z-index is located in front (see rule # 8 and 9).
In your second example, we have:
- an element with opacity (which contains a green box, note that the z-index in the green box becomes local to that element)
- positioned blue square without z-index
Both elements belong to the same category (see rule No. 8). In this case, the order of the HTML determines which element is displayed in front. A blue square will appear later in source order so that it appears in front.
source to share
In addition to opacity
the stacking context, Alexey Ten pointed out in his comment (which is a factor here), z-index
refers to the container of elements. In this case, both of your blue and green elements are contained in separate parents div
, which are undefined z-index
. Due to the HTML ordering, the last one div
(the one with the blue border) will appear on top of the first (green).
In this example below, I added a class .first
to the first parent div
and .second
the second, and then gave them my own properties z-index
.
.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>
source to share