1. Introduction
This article mainly z-indexexplains attributes in detail, including their use scenarios, attribute effects, scope of application, etc. The browser environment for all code execution in this blog is based on the Chrome browser.
1. The role of attributes
z-indexThe attribute is used to set the stacking order of the elements or called the element level, z-indexthe larger the value, the higher the level of the element. When the elements overlap, the higher-level elements will cover the lower-level elements, so that the overlapping parts of the lower-level elements will be covered.
When the attribute is set on the parent element z-index, the attribute of the child element z-indexis only meaningful when compared with the same-level element and the parent element, and it is meaningless when compared with other elements. At this time, when the child element is compared with all external elements other than the parent element, the attribute value of the parent element is used for comparison, and the attribute value z-indexof the child element itself is invalid.z-index
When the parent element has no z-indexattribute set, and the attributes of the child element z-indexare compared with all external elements outside the parent element in stacking order, the z-indexattribute value of the element itself shall be used for comparison.
2. Value range
z-indexThere are three types of attribute values: auto(默认值)：与父元素的层级相等，如各级祖先元素均未设置该属性，则类似于0, number：整数数值，在兼容所有浏览器的情况下取值范围是 -2147483584 ~ 2147483584，数值越大，层级越高，数值越小，层级越低,inherit：继承父元素的z-index的属性值
3. Scope of application
z-indexThe attribute can only work in the set position: relative | absolute | fixedelement and the child element whose parent element has set display: flexthe attribute , and it does not work in other elements.
2. Usage scenarios
1. Between elements of the same level
① Two sibling elements with positioning and z-indexdifferent attribute values
The level between them is z-indexdetermined by the attribute value. The higher the attribute value, the higher the level, and it is displayed in the front.
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 9; /* z-index属性值小 */
background-color: blanchedalmond;
}
.box2 {
position: relative;
top: -100px;
left: 100px;
z-index: 99; /* z-index属性值大 */
background-color: blueviolet;
}
</style>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
Page effect:
① Two sibling z-indexelements with the same positioning and the same attribute value
Since z-indexthe attribute values are the same, the level between them is determined by the writing order of the elements, and the later elements will cover the previous elements.
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 99; /* z-index属性值相同 */
background-color: blanchedalmond;
}
.box2 {
position: relative;
top: -100px;
left: 100px;
z-index: 99; /* z-index属性值相同 */
background-color: blueviolet;
}
</style>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
Page effect:
③Two sibling elements with positioning set and one with z-indexattributes set and one without attributes setz-index
For an element with no attribute set , the default value is 0. If the attribute value of the element with the attribute z-indexset is greater than 0, the level of the element will be higher than that of the element without the attribute set:z-indexz-indexz-index
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 1; /* z-index属性值大于0 */
background-color: blanchedalmond;
}
.box2 {
position: relative;
top: -100px;
left: 100px;
background-color: blueviolet;
}
</style>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
Page effect:
z-indexBut if the attribute value of the element with the attribute set z-indexis less than 0, the level of the element will be lower than z-indexthe element without the attribute set:
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: -1; /* z-index属性值小于0 */
background-color: blanchedalmond;
}
.box2 {
position: relative;
top: -100px;
left: 100px;
background-color: blueviolet;
}
</style>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
Page effect:
There is also the last case, that is, when the attribute value z-indexof the element with the attribute set is 0, the element with the attribute set at this time has the same level as the element without the attribute set, and follows the rule that the latter element overrides the previous element:z-indexz-indexz-index
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 0; /* z-index属性值等于0 */
background-color: blanchedalmond;
}
.box2 {
position: relative;
top: -100px;
left: 100px;
background-color: blueviolet;
}
</style>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
Page effect:
2. Between parent and child elements
① The parent element has no z-indexattribute set, and the child element has set z-indexthe attribute
When the attribute value of the child element z-indexis greater than or equal to 0, the level of the child element will be higher than the level of the parent element, and when the z-indexattribute value of the child element is less than 0, the level of the child element will be lower than the level of the parent element:
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: 0; /* z-index的值大于等于0 */
}
.box1-son2 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
z-index: -1; /* z-index的值小于0，层级低，被父元素挡住 */
background-color: red;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
<div class="box1-son2">
盒子1的子盒子2
</div>
</div>
Page effect:
② The parent element has z-indexattributes set, but the child element has no z-indexattributes set
In this case, no matter z-indexwhat the attribute value of the parent element is, the level of the child element is always higher than that of the parent element, and the child element will always block the content of the parent element:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
z-index: 9999; /* z-index的值很大 */
}
.box1-son1 {
/* 未设置z-index */
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
Page effect:
③ The parent element sets z-indexthe attribute, and the child element also sets z-indexthe attribute
In this case, regardless of z-indexthe attribute values of the child element and the parent element, the level of the child element is always higher than that of the parent element, and the child element will always block the content of the parent element:
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
z-index: 9999; /* z-index的值很大 */
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: -9999; /* z-index的值很小 */
}
.box1-son2 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
z-index: 0; /* z-index的值等于0 */
background-color: red;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
<div class="box1-son2">
盒子1的子盒子2
</div>
</div>
Page effect:
3. Between the child element and other elements other than its parent element
① The parent element has no z-indexattribute set, and the attribute value of the child element is compared z-indexwith the attribute value of the same-level element of the parent elementz-index
Because it is compared with the same-level element of the parent element, and the parent element is not set z-index, z-indexthe attribute value of the child element is used to compare with the parent element's sibling element, and z-indexthe element with a large attribute value follows the rules of higher hierarchy, and When the levels are the same, the latter elements override the rules of the former elements. When the attribute value of
the child element is smaller than the attribute value of the sibling element of the parent element:z-indexz-index
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
/* z-index未设置 */
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: 99; /* z-index的值大 */
}
.box2 {
position: relative;
margin: -100px 0 0 100px;
z-index: 9;/* z-index的值小 */
background-color: blueviolet;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
</div>
Page effect:
z-indexWhen the attribute value of the child element is less than or equal to z-indexthe attribute value of the sibling element of its parent element:
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
/* z-index未设置 */
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: 1; /* z-index的值小 */
}
.box2 {
position: relative;
margin: -100px 0 0 100px;
z-index: 9;/* z-index的值大 */
background-color: blueviolet;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
</div>
Page effect:
② The parent element sets the z-index attribute, and the child element z-index attribute value is compared with the parent element's sibling element z-index attribute value
Because it is compared with the same-level elements of the parent element, and the parent element is set z-index, z-indexthe attribute value of the parent element is used to compare with the parent element's sibling elements, and z-indexthe element with a large attribute value is also followed, and the hierarchy is high. And when the levels are the same, the latter element overrides the rule of the former element.
z-indexWhen the attribute value of the parent element is less than or equal to the attribute value of the parent element's sibling element , but the attribute value z-indexof the child element is greater than the attribute value of the parent element's sibling element :z-indexz-index
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
z-index: 0; /* z-index设置 */
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: 999; /* z-index的值大 */
}
.box2 {
position: relative;
margin: -100px 0 0 100px;
z-index: 9;/* z-index的值小 但是大于 box1 的z-index */
background-color: blueviolet;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
</div>
Page effect:
z-indexWhen the attribute value of the parent element is greater than the attribute value of the parent element's sibling element , but the attribute value z-indexof the child element is smaller than the attribute value of the parent element's sibling element:z-indexz-index
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
z-index: 99; /* z-index设置 */
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: -9; /* z-index的值小 */
}
.box2 {
position: relative;
margin: -100px 0 0 100px;
z-index: 9;/* z-index的值小 但是大于 box1 的z-index */
background-color: blueviolet;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
</div>
Page effect:
③ None of the parent elements has attributes set , and the attribute value of z-indexthe child element A is compared with the attribute value of the child element B of the same-level element of the parent elementz-indexz-index
This situation is quite special. The previous stacking order of the elements needs to be compared one by one separately. First compare each child element with its parent element, then compare the two lower-level ones in the first comparison, then compare the two higher-level ones in the previous comparison, and finally compare the higher-level ones in the second comparison Compared with the lower level in the third comparison, the result can finally be obtained.
When the attribute value of child element A is greater than the attribute value of z-indexchild element B :z-index
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: 99; /* z-index的值大 */
}
.box2 {
position: relative;
margin: -120px 0 0 80px;
background-color: blueviolet;
}
.box2-son1 {
position: relative;
width: 100px;
height: 100px;
z-index: 9; /* z-index的值小 */
background-color: green;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
<div class="box2-son2">
盒子2的子盒子2
</div>
</div>
</div>
Page effect:
④ The parent elements A and B are both set with z-indexattributes, and the attribute value of the child element A1 is compared z-indexwith the attribute value of the child element B1 of the same-level element of the parent elementz-index
When the attribute is set on the parent element z-index, the attribute of the child element z-indexis only meaningful when compared with the same-level element and the parent element, and it is meaningless when compared with other elements. At this time, when the child element is compared with all external elements other than the parent element, the attribute value of the parent element is used for comparison, and the attribute value z-indexof the child element itself is invalid.z-index
When the attribute value of the parent element A is greater than the attribute value z-indexof the parent element B , but the attribute value of the child element A1 is smaller than the attribute value of the child element B1 :z-indexz-indexz-index
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 99;
background-color: blanchedalmond;
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: -99; /* z-index的值小 */
}
.box2 {
position: relative;
margin: -120px 0 0 80px;
z-index: 9;
background-color: blueviolet;
}
.box2-son1 {
position: relative;
width: 100px;
height: 100px;
z-index: 98; /* z-index的值大 */
background-color: green;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
<div class="box2-son2">
盒子2的子盒子2
</div>
</div>
</div>
Page effect:
④ The parent element A has set z-indexthe attribute, but the parent element B has not set the attribute value, and the attribute value of the child element A1 is compared z-indexwith the attribute value of the child element B1z-index
This is another complicated situation. First, z-indexcompare the parent element B with no attribute set with its child element B1, then compare the parent element A with the higher level in the first comparison, and then compare the middle level in the first comparison The lower one is compared with the lower one in the second comparison, and finally the levels of the two child elements are compared, so that the final hierarchical order can be obtained:
code:
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 9;
background-color: blanchedalmond;
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: -99; /* z-index的值小 */
}
.box2 {
position: relative;
margin: -120px 0 0 80px;
background-color: blueviolet;
}
.box2-son1 {
position: relative;
width: 100px;
height: 100px;
z-index: 98; /* z-index的值大 */
background-color: green;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
<div class="box2-son2">
盒子2的子盒子2
</div>
</div>
</div>
Page effect:
⑤ Other situations
4. The parent element is set display: flex, and the child elements are compared
The rules are equivalent to the comparison between child elements at the same level. z-indexElements with larger attribute values have higher levels:
code:
<style>
div {
width: 200px;
height: 200px;
}
.box2 {
display: flex;
margin: 0px 0 0 80px;
background-color: blueviolet;
}
.box2-son1 {
width: 100px;
height: 100px;
z-index: 9;
background-color: green;
}
.box2-son2 {
width: 100px;
height: 100px;
margin-left: -20px;
z-index: 8;
background-color: yellow;
}
</style>
<div class="box2">
盒子2
<div class="box2-son1">
盒子2的子盒子1
</div>
<div class="box2-son2">
盒子2的子盒子2
</div>
</div>
Page effect:
4. The parent element A is set display: flex, the parent element B is set positionand the comparison between the two levels of elements is the same z-indexas the above two set parent elements.position
slightly. . .