CSS Example: “position:fixed”, overlap, z-index

Xah Lee, 2005-11, 2010-03-20

This page shows you how to use CSS to create multiple layers, and how to use the position:fixed and “z-index”.

You can use position:fixed to set a element's position relative to the window. (See: CSS Example: Position Fixed Relative to Window.) But if you have 2 such elements, they may overlap. You can specify which element is more in front by using “z-index”.

When a element has position:fixed, it's position is determined by “top, left, bottom, right” atributes, as offsets, relative to window.
When a element is position:fixed, it is moved into a layer by itself.
The “z-index” determines which elements are more in front, for elements that are position:fixed. The larger the number, the more in front.

Example

Look at the lower right, there are 2 overlapping boxes, one yellow and one red. Their positions are fixed relative to the window.

Yellow Box

Red Box

Here's their code:

<div style="
position:fixed; z-index:6;
bottom:10ex; right:10ex;
">
<p class="x08f7d">Yellow Box</p>
</div>

<div style="
position:fixed; z-index:7;
bottom:8ex; right:8ex;
">
<p class="x09e4a">Red Box</p>
</div>

Both have position:fixed. The yellow has z-index:6, and red has 7. So, red is more in front.

The “z-index” is meaningful only for elements who's “position” is one of “absolute”, “relative”, “fixed”.