First, Z-index grammar and structure
Z-index with specific numbers
Such as:
DIV{Z-INDEX:100}
Note : The value of Z-index is not the same as the unit.
The higher the number of z-index, the more forward, and the value must be both integers and positive numbers (integers with positive numbers).
Ii. Z-index conditions of Use
Z-index is used only when using the absolute positioning Position:absolute property condition. Usually we have different object boxes that overlap in different order, and we just want to z-index the style attributes.
Three, Z-index application case
To conveniently observe the Z-index style properties, we set up 3 div boxes, set different CSS background colors, set the same CSS height, CSS width. Set the background color to black, red, and blue, respectively. CSS width is 100px,css height of 50px
. CSS Code
. HTML code
<div class= "divcss5-1" ></div> <div class= "divcss5-2" ></div> <div class= "divcss5-3" > </div>
. Case
Case Description:
All three boxes use the absolute positioning attribute Position:absolute style and set the same height and width style. For the sake of observing we use the left and right properties and assign different values to make them patchwork.
Divcss5-1 box background is black, z-index:10
Divcss5-2 box background is red, z-index:20
divcss5-3 box background is blue, z-index:15
To be able to see the first box z-index:10, so overlap in the lowest layer, and the second box z-index:20, the maximum value so the top overlap, the third box is set z-index:15, centered.
Iv. Summary of Z-index
We use the Z-index overlay order style, we need absolute positioning style when the actual div+css layout, and we can use left and right to locate, with different z-index values to achieve layer overlap order.
Note: This article is reproduced from http://www.divcss5.com/rumen/r402.shtml
CSS Z-index layer overlap order