Home > Developer > JavaScript
The usage of z-index that you don't know, and the usage of z-index
Before starting today's content, let's take a look at the following code:
<style type="text/css">
#div1,#div2{
width:200px;
height:200px;
background-color:red;
position: relative;
z-index:1;
}
#div2{
background-color:green;
z-index:0;
}
#div1_1,#div2_1{
width:100px;
height:100px;
background-color:black;
}
#div1_1{
position:relative;
z-index:-100;
left:80px;
top:140px;
}
#div2_1{
background-color:yellow;
z-index:999;
position: relative;
left:160px;
top:-50px;
}
</style>
<Body>
<Div id = "div1">
I'm div1.
<Div id = "div1_1">
I'm div1_1.
</Div>
</Div>
<Div id = "div2">
I'm div2.
<Div id = "div2_1">
I'm div2_1.
</Div>
</Div>
</Body>
'
??? Excuse me? Why is the z-index value of div2_1 all 999 lower than that of div1? What if the z-index value of div1_1 is-100 higher than div1? Don't worry, and listen to me.
First, we need to understand three things when we are not familiar with one thing: 1. What is this thing? 2. What is the purpose? 3. How to use it?
We will also follow these three steps to explain the z-index attribute. First, what is this thing? Z-index is actually a common attribute in css. It is mainly used to set the stacking sequence of elements. The straightforward point is that if your webpage contains three Divs, the bottom layer should be displayed to the top layer in a certain order. What should you do? Because we are two-dimensional in general web development, and css introduces this attribute to help us better layout.
Next, let's take a look at how to use this item. Below I will introduce some conceptual items to you:
1. Set the stacking sequence of elements in the z-indeex attribute. elements with a higher stacking order will always be in front of elements with a lower stacking order.
2. For element of the same level, the element after the Document Stream overwrites the previous element by default or position: STATIC.
3. If the position of the element at the same level is not static and the z-index exists, the element with a large z-index will overwrite the element with a small z-index, and the higher the z-index, the higher the priority.
4. in ie6/7, the position is not static, and the z-index does not exist. The z-index is 0, and the browser z-index is auto;
5. elements whose z-index is auto do not participate in the comparison of hierarchical relationships. The elements whose z-index is not auto are traversed up to participate in the comparison.
Note: If you set the position: static element and do not set the position element, there is no impact on the stack level (the following example will not explain, and the position below will not be static by default)
The following describes several instances:
1. There is no stacking order of elements when z-index and position are involved:
<Div id = "div1"> </div>
<Div id = "div2"> </div>
The stacking rule of the above two divs is that the stack hierarchy is higher than the previous one. That is to say, if you use negative margin to move div2 to div1, the overlapping part is the displayed div2 instead of div1. Then some people will ask, so I will add div3 after div2. No matter how many divs are behind you, the layers are the same as div2 and will not be higher than div2.
2. When position is involved but z-index is not involved
Eg:
<Style type = "text/css">
/* Positioning rule. If the position stack order is given priority, A is changed to B at this time */
# A, # B {
Width: 100px;
Height: 100px;
Background-color: red;
}
# B {
Background-color: green;
Margin-top:-20px;
Margin-left: 20px;
}
# {
Position: relative;
}
</Style>
<Body>
<Div id = "a">
I am
</Div>
<Div id = "B">
I am B
</Div>
</Body>
Then you can see the following situation:
What does this mean? Although Element B is behind Element a, after position is added to element a, its stack level becomes higher, and it goes to the top of Element B.
Therefore, we can use this rule to implement layer-3 stacking without z-index. For example:
<Style type = "text/css">
/* Positioning rules. Three divs can also be used for stacking without z-index interference */
# A, # B {
Width: 100px;
Height: 100px;
Background-color: red;
}
# B {
Background-color: green;
Margin-top:-20px;
Margin-left: 20px;
}
# A_1 {
Width: 50px;
Height: 50px;
Background-color: blue;
Position: relative;
Left: 80px;
Top: 50px;
}
</Style>
</Head>
<Body>
<Div id = "a">
I am
<Div id = "a_1">
I am A sub-DIV of.
</Div>
</Div>
<Div id = "B">
I am B
</Div>
</Body>
3. z-index participation:
1. Simple Stack:
# Div1 {
Position: relative;
Z-index: 1;
}
#div2{
position:relative;
}
#div1{
position:relative;
z-index:0;
}
<Div id = "div1"> </div>
<Div id = "div2"> <// div>
<Div id = "div3"> </div>
The hierarchical order is that div1 is at the top layer, and div2 and div3 are at the second layer, that is, the last layer. Note that when position has a value, setting z-index to 0 is the same as setting z-index.
2. relatively complex stacking (the parent principle of z-index ):
This means that the child element first needs to check whether the parent element has a z-index. In the first example, when the z-index of the two parent elements div1 is 1, when the z-index of div2 is 0, all sub-elements and their own levels of div1 are higher than div2 and its sub-elements, this also explains why div2_1's z-index value is set to 999 and is still under div1. Speaking of this, there is another problem in the above example. I have set the z-index to-100 for div1_1. Why is it higher than div1. Some students think that I just want the background black div1_1 to be under the parent div1. So there is another principle: when the parent element has a z-index set, the level of the child element will be higher than that of the child element. Therefore, if you want to keep the level of the child element under the parent element, you will always set the z-index of the child element, all of them are set to z-index 1000, which has no effect. Check whether the parent element has been set to z-index!
At last, I would like to emphasize that z-index can be negative, and the value of z-index should be an integer without px. Many new handwriting width and height are used to writing, by the way, the value of z-index is taken with px. second, when using z-index, it must be used with position. No matter whether the position value is fixed, absolute or relative, however, the values of static and no position are consistent.
To sum up, the above example Seems messy, and I really don't know how to use it. From the perspective of personal experience, we should first check whether there is a position or no position, and then look at the level in order. With position, check whether there is a z-index. When setting the value of z-index for the child element of the parent element, be sure to check whether the parent element has a z-index, this is important because the parent element affects the hierarchy of child elements and is also the most common mistake we make. If the maximum or minimum value of the z-index of an element does not work, check whether you have a thorough understanding of the parent principle of z-index! In the end, it has nothing to do with this article. css styles have many attributes that are inherited, such as color. We need to learn about it slowly, it is recommended that you have time to learn about css inheritance.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
