Cascading Style Sheets/Archives

This page applies to version 48 and older of Chrome. This version is considered obsolete and some or all of this information does not apply to any current version of this software. Please help out and update this information by editing this page.

This page applies to version 48 and older of Firefox. This version is considered obsolete and some or all of this information does not apply to any current version of this software. Please help out and update this information by editing this page.

This page applies to version 18 and older of Edge. This version is considered obsolete and some or all of this information does not apply to any current version of this software. Please help out and update this information by editing this page.

This page applies to version 11 and older of Internet Explorer. This version is considered obsolete and some or all of this information does not apply to any current version of this software. Please help out and update this information by editing this page.

This page applies to version 9.1 and older of Safari. This version is considered obsolete and some or all of this information does not apply to any current version of this software. Please help out and update this information by editing this page.

This page applies to version 35 and older of Opera. This version is considered obsolete and some or all of this information does not apply to any current version of this software. Please help out and update this information by editing this page.

z-index

IE6/IE7 z-index Workarounds

This section applies to version 7 and older of Internet Explorer, an obsolete version.

In IE7 and under, relatively and absolutely positioned elements have an automatic z-index of zero. In addition, IE evaluates a z-index of auto as a z-index of zero. Therefore, two absolutely positioned elements inside different containers cannot overlap. If one of the parent elements has a z-index of 1, then it's child can overlap the child of the other container. For dropdowns, raise the z-index of the currently hovered item instead of relying on the z-index of the menu itself.

Set descending z-index values on the each relatively positioned div starting from the outermost container so that the root div in the markup has the highest value and any absolutely positioned divs within have the lowest z-index values so they will not overlap static divs in IE6

Any relatively positioned element with haslayout establishes a stacking context. If two elements are both relatively positioned, and one is set to z-index:1, it will be hidden under the second div if they overlap in IE6/7.

To get a modal dialog box to overlap a select element in IE6, use a positive z-index value and overflow:hidden; for the absolutely positioned div. Then insert an empty iframe inside conditional comments as a child element of the absolutely positioned div and style it position:absolute; top:0; left:0; z-index:-1; filter:mask(); and a defined width and height. This works because a select element behind an iframe will not be drawn by IE6, even if it is invisible.