Confusion about Z-index in IE

Z-index attributes

Reference:

Z-index: auto | Number

Auto: default value.
Number: an integer with no unit. It can be a negative number.

Elements with a large Z-index value are superimposed on elements with a small Z-index value. For positioning objects that do not specify this attribute, objects with a positive Z-index value are placed above it, while objects with a negative Z-index value are placed under it.

Note: This property does not apply to window controls, such as selct objects. In IE 5.5 +, IFRAME objects start to support this attribute. In earlier browser versions, the IFRAME object is a window control, and this attribute is ignored.

 

The Z-index attribute is applicable to positioning elements (objects whose position attribute value is relative, absolute, or fixed). It is used to determine that the positioning element is perpendicular to the display (called the Z axis) stack order ).

Each positioning element belongs to a stacking context. The root element forms the root stacking context, while other stacking context is generated by the positioning element (the Z-index of the positioning element is defined as a non-auto Z-index value ), the positioning sub-element takes the local stacking context as a reference and uses the same rules to determine the cascade order. In addition, stacking context and containing block are not necessarily related.

When the stacking context is the same, the value of Z-index is used to determine how to display it. If the value of Z-index is the same (that is, the stack level is the same ), it is stacked in the back-to-front order.

When either element is stacked and another element is contained in different stacking context elements, the order of display is determined by the stack level of stacking context. That is to say, in the same stacking context, the order is determined by the Z-index of the stacking context. For example:

The positioning Element A (Z-index: 100) contains the positioning Element A1 (Z-index: 300), while the positioning Element B and the element a sibling relationship (Z-index: 200 ). You will find that no matter how big the Z-index of A1 is, it will be overwritten by B where Z-index is 200, because the Z-index of A is only 100.

Read more details: http://www.w3.org/TR/CSS21/visuren.html#z-index