Z-index: the use of opacity and z-index

The real question about z-index is that few people understand how to use it. In fact, it is not complex, but if you have never taken some time to read the specific z-index documents, you may ignore some important information.

Don't believe me? Let's see if you can solve the following problem:

Problem:

There are three <div> elements in the following HTML, and each <div> contains a <span> element. Each <span> is given a background color: Red, green, and blue. Each <span> is placed near the upper left corner of the document, with some overlapping <span> elements. This allows you to see which elements are stacked in front. The first <span> has a z-index value of 1, while the other two do not have any z-index values.

Here is the HTML and its basic CSS.

HTML code

123456789

<div> <span>Red</span></div><div> <span>Green</span></div><div> <span>Blue</span></div>

CSS code

12345678910111213

.red, .green, .blue { position: absolute;}.red { background: red; z-index: 1;}.green { background: green;}.blue { background: blue;}

Challenges:

Try to heap the red <span> elements behind the blue and green <span> elements. Do not break the following rules:

• Do not change the HTML Tag in any way
• Do not add/modify the z-index attribute of any element
• Do not add/modify the position attribute of any element

If you find the answer, it should be as follows:

123456789

<div> <span>Red</span></div><div> <span>Green</span></div><div> <span>Blue</span></div>

 

12345678910111213141516

div:first-child { opacity: .99;}.red, .green, .blue { position: absolute;}.red { background: red; z-index: 1;}.green { background: green;}.blue { background: blue;}

 

Solution:

This solution is to add an opacity attribute value less than 1 in the First <div> (parent node of red <span>. The following is an example of the added CSS:

123	div:first-child { opacity: .99;}

If you are shocked, but still have to think about it, and do not believe that opacity can decide which element is in front of you, you are welcome to ask questions in the community, I was also shocked when I was troubled by this problem for the first time.

We hope that the following content will help you better understand this issue.

Stack Sequence

The Z-index looks so simple: the high z-index is located in front of the low z-index, right? This is actually wrong, and is part of the z-index problem. It looks so simple that many developers do not take the appropriate time to read relevant rules.

Each element in the HTML document can be located before or after other elements. This is the so-called stack sequence. The rules that determine this order are clearly defined in the instructions, but as I have mentioned before, these documents are not fully understood by most developers.

When the z-index and position attributes are not included, these rules are quite simple: basically, the stack order is the same as the order in which elements appear in HTML. (Well, it is actually a bit complicated, but you may not encounter boundary problems as long as you do not use the compressed boundary to overlap the elements in the row .)

When you include location attributes, any positioning elements (and their child elements) are displayed before non-positioning elements. (If an element is "located", it means that it has a location value different from the static value, such as relative, absolute, and so on .)

At last, when z-index is promoted in a timely manner, things become a little complicated. Initially, it is natural to assume that the element with a high z-index value will be in front of the element with a low z-index value, but it is not that easy to find later. First, z-index only applies to positioning elements. If you try to set a z-index value for a non-positioning element, it will certainly not work. Second, the z-index value can create a stack Context Environment, and suddenly finds that something seemingly simple is more complicated.

Stack Context

A group of elements with the same parent and parent are moved forward or backward in the stack order to form the so-called stack context. Fully understanding the stack context is the key to truly grasp the working principles of the z-index and stack sequence.

Each stack context has an HTML element as its root element. When a new stack context is formed on an element, this stack context limits all sub-elements to be stored in a special place in the stack order. This means that once an element is contained in the stack context in the bottom stack order, there is no way to appear first in other different stack context elements in the higher stack order, even if the value of z-index is one billion, it won't work!

Currently, there are three methods to form the stack context on one element:

• When an element is the root element of a document (
• When an element has a position value instead of static, it has a z-index value instead of auto.
• When an element has an opacity value less than 1

The first two methods form the stack context are of great significance and are understood by the majority of Web developers (even if they do not know what these are called ). The third method (opacity) has almost never been mentioned outside the w3c documentation.

Determine the position of an element in stack order

In fact, it is extremely complicated to determine the global stack sequence (including boundaries, backgrounds, text nodes, and so on) for all elements on a page, and far beyond the scope of this article (again, refer to the document ). But our biggest goal is to get to know this order, which can help us improve the predictability of CSS development for a long time. So let's break down the order and break down into independent stack context.

Stack order in the same stack Context

The following are several basic rules to determine the stack sequence in a single stack context (from the back to the front ):

Note: positioning elements with Negative z-index values are sorted first in a stack context, which means they appear behind all other elements. For this reason, it makes it possible for an element to appear after its parent element, which was previously impossible. Of course, this is limited to the fact that its parent element is in the same stack context and is not the root element of that stack context. A great example, such as Nicolas Gallagher's CSS, does not require Image Shadow reduction.

Global stack Sequence

Firmly understand why/when new stack context is formed, and master the stack sequence of the same stack context, it's not that bad to let you figure out the order in which a specific element will appear in the global stack?

The key to avoiding errors is to discover when the new stack context is formed. If you set the z-index value to one billion for an element but it does not move forward in the stack order, check its ancestor tree, check whether its parent node forms a stack context. If that is the case, your z-index value will not benefit you even if there are billions.

Bandage Treatment

Back to the original problem, I have rebuilt the HTML structure and added some comments. Each tag indicates the order of the HTML structure in the stack. This order assumes the original CSS.

123456789

<div><!-- 1 --> <span><!-- 6 --></span></div><div><!-- 2 --> <span><!-- 4 --><span></div><div><!-- 3 --> <span><!-- 5 --></span></div>

When we add opacity to the first <div>, the stack order changes as follows:

123456789

<div><!-- 1 --> <span><!-- 1.1 --></span></div><div><!-- 2 --> <span><!-- 4 --><span></div><div><!-- 3 --> <span><!-- 5 --></span></div>

Span. red used to have 6 orders, but now it is changed to 1.1. I have used "." To mark the formation of a new context. Span. red is now the first element of the new context.

Now it seems clearer about why the red box ran behind other boxes. The original example only contains two stack contexts, the root element and the one that forms span. red. When we add opacity to span. red parent node forms the third stack context, and the result is displayed in span. the z-index value on red can only be applied to the new stack context. Because the first <div> (the one that applies opacity) and its sibling element do not have a set of position or z-index values, their stack order is determined by their source order in HTML, that is, the first <div>, and all the elements in its stack context are separated by the second and third <div> elements.