Cascading Style Sheets/z-index

0

1

2

3

4

5

6

7

8

9

Ten translucent divs with respective z-index from 0 to 9.

IE6/IE7 z-index Workarounds

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.

z-index Usage

Every element whose z-index is specified as an integer or whose opacity is not equal to 100% establishes a new stacking context in which the element itself is the zero z-index for its child elements, and its children are positioned relative to each other but cannot overlap elements outside of the container.

If a relatively positioned element is display:inline, its left/right and top/bottom offsets are based on its container only instead of the stacking context

A z-index of auto means that the element does not create a z-index of zero for its children, so their z-index value is relative to the other elements on the page

If two or more sibling elements have the same stacking level within their parent, they are rendered back to front in the order of their appearance in the HTML markup.

If you want relatively positioned elements in one div to overlap relatively positioned elements in another div, you have to raise the z-index of the entire div, or combine the content into the one container div

If you want one element to paint on top of everything else, but you want a child of that element to be behind everything else, make that element the only relatively positioned element, then position the child with a negative z-index

If you want one border color to overlap another on adjacent table cells, give that cell a higher z-index than the other. Use a border width of zero with the higher z-index to erase the border completely.

An element that establishes a stacking context will overlap an adjacent floating element if they intersect

Elements with the same stacking context are displayed based on source order; tags added last overlap tags added first