Z-index ordering

  • Article

The z-index specifies in what order elements should be drawn when two or more elements occupy the same area. Setting the z-index is useful whenever you have absolutely or relatively positioned elements that overlap other elements in your web page.

You set the z-index by using the z-index property. Setting this to a positive value causes the element to be stacked on top of other elements; setting it to a negative value causes it to be stacked underneath other elements. The following example uses z-index to stack text on top of the image:

<html>
<head><title>Stack the Image</title>
</head>
<body>
<p style="position: absolute; top: 0px; left: 0px;">Text Over Image</p>
<img src="sample.jpg" style="position: absolute; top: 0px; left: 0px; z-index: -1;"/>
</body>
</html>

The element that has the highest z-index value is always placed at the top of the stack, and the element that has the lowest z-index value is placed at the bottom. If two elements have the same z-index, their source order determines the stacking (the last element is stacked higher).

Note

You can't use input from a pointing device, such as a mouse, to interact with an element that is stacked underneath other elements. You might expect to be able to interact with a visible object that is positioned beneath an object that is not visible, but the top object in the stack takes selection precedence. This is also true for positioned elements that have a negative z-index, unless the parent is a scrolling container (that is, its overflow property is set to auto or scroll), or the parent is manually positioned (that is, its position property is set to absolute, relative, or fixed).

You can change the z-index dynamically by setting the z-index property, as in the following example:

Myimg.style.z-index = 2;

Some elements, including IFRAME and some ActiveX controls, are not affected by the z-index property and will not interact correctly with elements that are.

Note

Although they are associated with different parts of the rendered page, fixed-position elements are also subject to the relative stacking order of absolutely-positioned elements.

See also

Concepts

Controlling content visibility
Element visibility

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.