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.

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