The purpose of CSS z-index grammar is to control the position of the z-axis. This requires a little space to explain. Assuming that facing a computer screen, the left and right directions are the x-axis, and the up and down are the y-axis, so the direction facing you is z Shaft! The larger the value of z-index, the closer you are to yourself. On the contrary, if the value of z-index is smaller, it means that you are farther away from yourself!


The use of z-index grammar alone is actually not enough to create a stacking effect of blocks or pictures, because z-index can only set the z-axis position of the block, and it must be combined with the position grammar to set the position of the block. To make a stacking effect, the following example is a simple special effect of z-index and position .

CSS z-index basic syntax
z-index: attribute value;
There are three options for CSS z-index attribute values, namely auto, number and inherit. The effect of the attributes is as follows
  • z-index:auto; // Default value, the order of stacking is the same as the parent layer.
  • z-index:number; // Decide the stacking order according to number, the larger the number, the higher the layer.
  • z-index:inherit; // inherited from the stacking order of the parent layer
Older versions of IE browsers (such as IE8) do not support the inherit attribute value and are not recommended.

CSS z-index example one, with position example
<style type="text/css">
img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}
</style>
Here is the text introduction<img src="example picture">
Rendering effect
Here is the text introduction
Example 1 is a typical CSS z-index application. There are two different elements, text and image. We use position to control the position of the image in the upper left corner, but by default, the image and text are in the same one. Flat, so they will push each other. At this time, we use the effect of the CSS z-index property to set the z-axis position of the image to -1, so that the image is placed under the text, and it will become like the presentation result of the example! The fun is not only that, we can use this feature to set the z-index of multiple DIV blocks at once to achieve the effect of multi-block overlap. Please see the actual effect of Example 2.

CSS z-index example two, multiple blocks overlap effect
<style type="text/css">
#p1{
    position:absolute;
    top:10px;
    left:10px;
    width:150px;
    height:150px;
    background-color:#00dc03;
    z-index:1;
}
#p2{
    position:absolute;
    top:20px;
    left:20px;
    width:150px;
    height:150px;
    background-color:#fdff55;
    z-index:2;
}
#p3{
    position:absolute;
    top:30px;
    left:30px;
    width :150px;
    height:150px;
    background-color:#ff1c19;
    z-index:3;
}
</style>
<div id="p1"></div>
<div id="p2"></div>
<div id="p3"></div>
Present results
Pay attention to the effect of stacking the three colored square blocks. The upper and left positions of each square block are different, but they are all set to absolute positions, with different values ​​of z-index ( The effects are 1, 2, and 3).