This content originally appeared on DEV Community and was authored by Rithik Samanthula
The problem with z-index is that very few people understand how it really works. It’s not that hard to understand, but it if you’ve never taken the time to read its specification, there are almost certainly really important aspects that you’re completely unaware of.
Don’t believe me? Well, see if you can solve this problem:
The Problem
In the following HTML you have three div elements, and each div, contains a single span element.
Each span is given a background color — red, green, and blue respectively.
Each span is also positioned absolutely near the top left of the document, slightly overlapping the other span elements so you can see which ones are stacked in front of which.
The first span has a z-index value of 1, while the other two do not have any z-index set.
Here’s what the HTML and basic CSS look like. I’ve also included a visual demo (via Codepen) with the full CSS below:
<div>
<span class="red">Red</span>
</div>
<div>
<span class="green">Green</span>
</div>
<div>
<span class="blue">Blue</span>
</div>
.red, .green, .blue {
position: absolute;
}
.red {
background: red;
z-index: 1;
}
.green {
background: green;
}
.blue {
background: blue;
}
Here’s the challenge: try to see if you can make the red span element stack behind the blue and green span elements without breaking any of the following rules:
To see if you can figure it out, click the edit on Codepen link above and play around with it for a bit. If you’ve succeeded, it should look like the example below.
The Solution
The solution is to add an opacity value less than 1 to the first
(the parent of the red ). Here is the CSS that was added to the image above:div:first-child {
opacity: .99;
}
If you’re scratching your head right now in shock and disbelief that opacity would have any effect on which elements are stacked in front of which, welcome to the club.
I was similarly shocked when I first stumbled upon this issue.
Hopefully the rest of this article will make things a little more clear.
Stacking Order
Z-index seems so simple: elements with a higher z-index are stacked in front of elements with a lower z-index, right?
Well, actually, no. This is part of the problem with z-index. It appears so simple, so most developers don’t take the time to read the rules, so that seems to be the problem.
Every element in an HTML document can be either in front of or behind every other element in the document.
This is known as the stacking order. The rules to determine this order are pretty clearly defined in the spec, but as I’ve already stated, they’re not fully understood by most developers.
When the z-index and position properties aren’t involved, the rules are pretty simple: basically, the stacking order is the same as the order of appearance in the HTML.
(OK, it’s actually a little more complicated than that, but as long as you’re not using negative margins to overlap inline elements, you probably won’t encounter the edge cases.)
When z-index is involved, things get a little trickier. At first it’s natural to assume elements with higher z-index values are in front of elements with lower z-index values, and any element with a z-index is in front of any element without a z-index, but it’s not that simple.
First of all, z-index only works on positioned elements. If you try to set a z-index on an element with no position specified, it will do nothing.
Secondly, z-index values can create stacking contexts, and now suddenly what seemed simple just got a lot more complicated.
Stacking Order Within the Same Stacking Context
Here are the basic rules to determine stacking order within a single stacking context (from back to front):
The stacking context’s root element.
Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
Non-positioned elements (ordered by appearance in the HTML)
Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
Wrapping Up
Getting back to the original problem, I’ve recreated the HTML structure adding comments within each tag indicating its place in the stacking order. This order is assuming the original CSS.
<div><!-- 1 -->
<span class="red"><!-- 6 --></span>
</div>
<div><!-- 2 -->
<span class="green"><!-- 4 --><span>
</div>
<div><!-- 3 -->
<span class="blue"><!-- 5 --></span>
</div>
When we add the opacity rule to the first div, the stacking order changes like so:
<div><!-- 1 -->
<span class="red"><!-- 1.1 --></span>
</div>
<div><!-- 2 -->
<span class="green"><!-- 4 --><span>
</div>
<div><!-- 3 -->
<span class="blue"><!-- 5 --></span>
</div>
span.red used to be 6 but it’s changed to 1.1. I’ve used dot notation to show that a new stacking context was formed and span.red is now the first element within that new context.
Hopefully it’s now a little more clear why the red box moved behind the other boxes.
The original example contained only two stacking contexts, the root one and the one formed on span.red. When we added opacity to the parent element of span.red we formed a third stacking context and, as a result, the z-index value on span.red only applied within that new context.
Because the first div (the one we applied opacity to) and its sibling elements do not have position or z-index values set, their stacking order is determined by their source order in the HTML, which means the first div, and all the elements contained within its stacking context, are rendered behind the second and third div elements.
Thank You and....
Keep Coding Y'All ???
This content originally appeared on DEV Community and was authored by Rithik Samanthula
Rithik Samanthula | Sciencx (2021-06-03T19:33:06+00:00) What No One Told You About Z-Index. Retrieved from https://www.scien.cx/2021/06/03/what-no-one-told-you-about-z-index-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.