Why Does Z-Index Behave Differently in IE 6 and IE 7?

IE 6 & IE 7 Z-Index: Behind the Stacking Context

When working with IE 6 or IE 7, you may encounter unexpected behavior when trying to stack elements using the z-index property. To understand the issue, it's essential to delve into the concept of "stacking contexts" in CSS.

Stacking Contexts

According to the CSS specification, z-index controls the stacking order of elements within the same "stacking context." A stacking context is established when an element has a non-auto position (absolute, fixed, or relative) and a specified z-index value.

IE's Stacking Anomaly

IE 6 and IE 7 stand out from other browsers in that positioned elements (even those with no explicitly specified z-index) implicitly create new stacking contexts. This behavior deviates from the CSS spec.

Impact on Z-Index Behavior

In IE 6 and IE 7, when two elements have z-index set, the comparison for determining stacking order occurs at the level of their stacking parents (typically their positionally non-static ancestors). If these parents have no specified z-index, document order dictates the stacking.

Workaround

To resolve this issue, explicitly set z-index values for the stacking parents of the elements you want to stack correctly. Start at lower parents and work your way up the nesting hierarchy, assigning decreasing z-index values to ensure proper order.

By understanding the behavior of stacking contexts in IE 6 and IE 7, you can effectively manipulate the z-index property to achieve desired stacking results without unexpected consequences.

The above is the detailed content of Why Does Z-Index Behave Differently in IE 6 and IE 7?. For more information, please follow other related articles on the PHP Chinese website!