Detailed explanation of the weight problem of css z-index-CSS Tutorial-php.cn

Detailed explanation of the weight problem of css z-index

青灯夜游

Release： 2021-02-13 09:34:35

forward

2723 people have browsed it

Detailed explanation of the weight problem of css z-index

This article will share with you the z-index weight issue of CSS. How can we make the elements we want to be ranked at the top be at the top, and the elements we want to be at the bottom to be at the bottom?

1. Let’s take a look at the following situations of z-index in actual combat:

One has defined positioning, and the other has not defined positioning. Who On top?
One parent box is positioned, one is not positioned, and the unpositioned child is positioned, who is on top?
One parent box is positioned, one is not positioned, the unpositioned child is positioned, and z-index is added to the positioned child element. Who is on top?
Both are positioned, but neither sets z-index. Who is on top?
Both are positioned, one sets z-index to 1, who is on top?

2. Set the basic dom structure and style and prepare for testing

Define the basic dom structure:

Detailed explanation of the weight problem of css z-index

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {margin: 0;padding: 0;}
        .box1, .box2 {
            width: 500px;
            height: 200px;
            border: 2px solid;
            margin: 10px;
        }
        .box1 {
            background: yellow;
        }
        .box2 {
            background: aqua;
        }
        .redDiv, .blueDiv {
            width: 150px;
            height: 150px;
        }
        .redDiv {
            background: red;
        }
        .blueDiv {
            background: blue;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
    </div>
    <div>
        <div></div>
    </div>
</body>
</html>

Copy after login

3. Start testing

Test question 1:

One has defined positioning, and the other has not defined positioning. Who is there? above?

We set the positioning of box2 and change its position

.box2 {
   background: aqua;
   position: fixed;
   left: 100px;
   top: 30px;
}

Copy after login

Effect:

box2 ran on top of box1.

Detailed explanation of the weight problem of css z-index

Test question 2:

One parent box is positioned, one is not positioned, and the unpositioned child is positioned, who is on top?

We set the positioning for redp in box1 box

.redp {
   background: red;
   position: fixed;
   }

Copy after login

Effect:

box2 is still on top of box1. Also on the positioned child element of box1.

Detailed explanation of the weight problem of css z-index

Test question 3:

One parent box is positioned, one is not positioned, and the unpositioned child sets the positioning, and gives the positioned one Add z-index to child elements, who is on top?

We add z-index to the redp in box1 box

.redp {
   background: red;
   position: fixed;
   z-index: 1;
   }

Copy after login

The effect:
redp is at the top, box2 is in the middle, and box1 is at the bottom.

Detailed explanation of the weight problem of css z-index

Test question 4:

Both are positioned, but neither set z-index, who is on top?

We first restore our initial style code and then change it again.
Change the styles of box1 and box2 in the initial code

.box1 {
    background: yellow;
    position: fixed;}.box2 {
    background: aqua;
    position: fixed;
    left: 100px;
    top: 30px;}

Copy after login

Effect:
box2 is above box1
Detailed explanation of the weight problem of css z-index

Test question 5:

Both are positioned, one sets z-index to 1, who is on top?

Let’s set the z-index of box1 to 1:

.box1 {
    background: yellow;
    position: fixed;
    z-index: 1;}

Copy after login

Effect:
Box1 ran on top of box2
Detailed explanation of the weight problem of css z-index

4. Conclusion

The positioned element is above the unpositioned element
The following element is also positioned above the previous element
The parents of the same level are all positioned [Ignore the children], whoever has a higher z-index is on top
One parent is positioned, the other parent is not positioned, and the element that is not positioned is If the child is positioned, then look at the positioned child and the positioned parent to see who has a higher z-index and who is on top.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of Detailed explanation of the weight problem of css z-index. For more information, please follow other related articles on the PHP Chinese website!