Cascading Style Sheets/Archives

page Chrome 48 and older << page Firefox 48 and older << page Edge 18 and older << page Internet Explorer 11 and older << page Safari 9.1 and older << page Opera 35 and older << z-index IE6/IE7 z-index Workarounds section Internet Explorer 7 and older << 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.