What is the stacking order of zindex? Detailed explanation of stacking order of zindex

Many people have just come into contact with z-index and don’t know how to use z-index. In fact, z-index is not very complicated, and it is not that simple to use. So, what is the stacking order of zindex? The following summarizes the stacking order of zindex for you.

1: The stacking order of zindex

zindex is very simple. We know that each document element can be in front of the element or behind the element. This is what we often call stack technology. If z-index and position are not included, the z-index rule is very simple. However, in practice, the order of appearance in html is the same. If the current attribute includes If included, child elements will be displayed in non-positioned positions.

For example:

HTML代码：
<div>
    <span class="red">Red</span>
</div>
<div>
    <span class="green">Green</span>
</div>
<div>
    <span class="blue">Blue</span>
</div>

CSS code:

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

The above code has three divs, and each div contains a class, and each span will have a corresponding color. When we place the span to the upper left corner of the document, other colors will be overlapped. When we set the first span to 1 and leave the other two unset, the following effect will appear:

2: Stack context

Currently, a stack can be formed in an element, and there are three methods

1. When an element When it is the root element of the document

2. The element has a position value and z-index value

3. And the opacity value is required to be less than 1

three : Global stack order

After understanding the stack context, it may not be so difficult to understand the global stack order. If it contains two stack contexts, when we add the parent node, At this time, a third context will be formed. Then, z-index can only be displayed to the third stack context. This is what we call the global stack order.

The above is what is the stacking order of zindex? A detailed introduction to the stacking order of zindex. If you want to know more about HTML video tutorial, please pay attention to the php Chinese website.

The above is the detailed content of What is the stacking order of zindex? Detailed explanation of stacking order of zindex. For more information, please follow other related articles on the PHP Chinese website!