An article takes you to understand css z-index (overlapping order)

div cssz-index layer overlap order

The div layer, span layer and other html label layers overlap the order style z-index. CSS usually uses less, but it is inevitable that you will encounter CSS z-index.

Learn z-index from basic grammar to application case tutorials.

One, z-index syntax and structure

z-index and specific numbers

div{
  z-index:100
}

Note : The value of z-index does not follow the unit.

The higher the number of z-index, the higher, and the value must be an integer and a positive number (a positive integer).

Two, z-index use conditions

The z-index can only be used when the absolute positioning position: absolute attribute is used. Usually CSS allows different object boxes to overlap in different orders, and CSS requires the z-index style attribute.

Three, case

1. Z-index overlapping sequence case

To facilitate observation, set 3 DIV boxes, set different CSS background colors, and set the same CSS height and CSS width. Set the background color separately) to black, red, and blue. CSS width is 300px, css height is 100px.

css code (without z-index attribute)

<style>
            .div css5 {
                position: relative;
            }

            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 300px;
                height: 100px;
                position: absolute;
            }

                .divcss5-1 {

                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }

            .divcss5-2 {

                background: #F00;/* 红色*/
                left: 20px;
                top: 20px
            }

            .divcss5-3 {

                background: #00F;/* 蓝色*/
                left: 30px;
                top: 30px
            }
</style>

CSS code (after adding the z-index attribute):

<style>
            .div css5 {
                position: relative;
            }

            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 200px;
                height: 100px;
                position: absolute;
            }

            .div css5-1 {
                z-index: 10;
                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }

            .div css5-2 {
                z-index: 20;
                background: #F00;/* 红色*/
                left: 20px;
                top: 20px
            }

            .div css5-3 {
                z-index: 15;
              background: #00F;/* 蓝色*/
                left: 30px;
                top: 30px
            }
</style>

html code

 <div class="divcss5-1"></div>
 <div class="divcss5-2"></div>
 <div class="divcss5-3"></div>

Effects not added:

Plus the z-index attribute effect:

2. Case description

The three boxes all use the absolute positioning attribute position style, and set the same height and width styles. In order to facilitate the observation of CSS, use the left and right attributes and assign different values ​​to make them scattered.

• Div css5-1 box background is black, z-index: 10

• Div css5-2 box background is red, z-index: 20

• The background of the Divcss5-3 box is blue, z-index: 15

In order to be able to see the first box z-index: 10, it overlaps on the bottom layer, while the second box z-index: 20 has the largest value so the top layer overlaps, and the third box sets z-index: 15 and is centered.

Four, summary

Based on CSS foundation, this article introduces how to use z-index overlapping order style. In the actual DIV+CSS layout, CSS needs absolute positioning style, and can use left and right for positioning, and realize layer overlapping order arrangement through different z-index values. The code is very simple, I hope it can help you learn.

If you want to learn more about front-end, Python crawler, big data and other computer knowledge, please go to: http://pdcfighting.com/ To learn more about Python web crawler and data mining, you can go to the professional website: http://pdcfighting.com /