CSS z-index layer overlap sequence Instance detailed

div layer, span layer and other HTML tag layer overlap Order style z-index, usually we use less, but also will inevitably encounter CSS Z-index use. Next DIVCSS5 introduces Z-index from basic to set object stacking order, overlapping order, from basic grammar to application case tutorial to explain learning z-index.

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

1. Case CSS Code

/* www.divcs5.com Z-index instance */. divcss5{position:relative;}. divcss5-1,.divcss5-2,.divcss5-3 {width:100px;height : 50px;position:absolute;} . Divcss5-1{z-index:10;background: #000; left:10px;top:10px}. Divcss5-2{z-index:20;background: #F00; left:20px;top : 20px}. Divcss5-3{z-index:15;background: #00F; left:30px;top:30px}

2. HTML code Snippet

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

3. Z-index case

div CSS Z-index Overlay sequence case

Z-index Style Practice Example 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.