z-index level

z-index sets the level of the element

z-index is followed by a positive integer. The larger the value, the higher the level.

but;

1. The z-index attribute must be used when positioning is turned on.

2. Set z-index. No matter how high the level of the parent element is, it will not be higher than the child element.

1.The value of z-index

1）关键字：auto

2) Value: Any integer (including positive numbers, negative numbers, 0)

3) Common value: inherit initial unset

2.The role of z-index

1) Generally speaking, the default value of z-index is auto

2) When z-index takes a numerical value, it has two effects:

① Establish a stacking context on the current element, which tells the browser that stacking occurs here and layering needs to be considered.

② Tell the browser the position of the current element in this stacking context.

For example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .box{
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .box1{
        position: relative;
      }
      .box2{
        background-color: green;
        position: relative;
        bottom: 50px;
        left: 50px;
        z-index:20;
      }
      .box3{
        background-color: grey;
        position: relative;
        left: 100px;
        bottom: 100px;
        z-index: 21;
      }

    </style>
  </head>
  <body>
    <div class="box1 box">1</div>
    <div class="box2 box">2</div>
    <div class="box3 box">3</div>
  </body>
</html>

The effect diagram is shown in the figure:

The level of box2 is 20, and the level of box3 is 21, so box3 is above box2. The higher the value, the higher the level. The premise is that positioning is turned on.

For example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
       .box4{
        width: 200px;
        height: 200px;
        background-color: pink;
        position: relative;
        z-index: 9999;
      } 
      .box5{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      } 

    </style>
  </head>
  <body>
    <div class="box4">
      <div class="box5">5</div>
    </div>
  </body>
</html>

The effect diagram is shown in the figure:

The level of our box5 is 1, and the level of its parent element box4 is 999, but box4 is not above box5 because the level of the parent element will not be higher than the child element no matter how high it is.

1.The value of z-index

2.The role of z-index

Guess you like