Cascading Style Sheets/Archives
 |
This page applies to version 48 and older of Chrome.
|
|
|
This page applies to version 48 and older of Firefox.
|
|
|
This page applies to version 18 and older of Edge.
|
|
|
This page applies to version 11 and older of Internet Explorer.
|
|
|
This page applies to version 9.1 and older of Safari.
|
|
|
This page applies to version 35 and older of Opera.
|
z-index
[edit | edit source]IE6/IE7 z-index Workarounds
[edit | edit source]
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.