CSS z-index usage and CSS z-index usage

CSS z-index usage and CSS z-index usage

Clarify position and z-index usage:

Static: no special positioning. Objects follow HTML positioning rules.
Absolute: drag an object out of the Document Stream and use left, right, top, bottom, and other attributes for absolute location. Its stack is defined by the z-index attribute. At this time, the object does not have margins, but still has padding and border
Relative: objects cannot be stacked, but will be offset in normal document streams based on left, right, top, bottom, and other attributes,

 

Z-index: in fact, it can be explained literally. z is the third axis after x and y, and the front and back of the webpage are shown in addition to top, bottom, and left.
To define this property, the Div must first be floating. The larger the z value, the higher the Div is. The value can be discontinuous.

 

For example

<Div> z-index: 1000; background: red; color: white; width: 200px; height: 200px; "> Layer 1 </div>
<Div> z-index: 100; background: yellow; color: blue; width: 200px; height: 200px; position: absolute; left: 70px; top: 120px; "> Layer 2 </div>
<Div> z-index: 10; background: green; color: white; width: 200px; height: 200px; position: relative; left: 30px; top:-150px; "> Layer 3 </div>

 

 

The z-index value of theoretical layer 1 is set to the largest and should be placed at the top. Because it is not set to float, it follows the HTML positioning rules.

Why is the top of Layer 3 set a negative value? Because position: relative cannot be stacked, it should be under layer 1, if you want it to go up a little. Only negative values can be set. While Layer 2 sets the position: absolute floating effect, which can be placed at will, not affected by other Divs, completely positioned based on the html page

Notes for using the Z-index attribute in the CSS style sheet:
1. Z-index is only valid for positioning elements (such as position: relative );
2. Z-index can only compare same-level elements. This may be a problem that everyone can easily ignore. I am stuck here. That is to say, Z-index can only show hierarchical elements of the same level;
3. Scope of Z-index: Assume that positioning (relative positioning, absolute positioning, and one relative absolute positioning) is set for both elements A and B, and it is A same level element, sample:

. BoxA {z-index: 4}

. BoxB {z-index: 5}
As A result, it is not difficult to see that the level of Element B is higher than that of element A. It should be noted that the level of child elements under Element A is also lower than that in element B, even if you set the child element in element A to z-index: 9999, similarly, the child element in element B, even if it is set to z-index: 1 It is still higher than the level of Element;
4. This property does not apply to window controls, such as selected objects.

Comparison of hierarchical relationships:

1. for elements of the same level, by default (or position: static), the elements following the Document Stream will overwrite the previous one.
2. if the position is not static and the z-index exists, the element with a large z-index will overwrite the element with a small z-index. That is, the higher the z-index, the higher the priority.
3. When position in IE6/7 is not static and z-index does not exist, the z-index is 0, and the browser z-index is auto.
4. The element whose z-index is auto does not participate in the comparison of hierarchical relationships. The elements that traverse up till now and whose z-index is not auto participate in the comparison.