∑ Home ◇ Math ◇ Computing ◇ Arts ◇ Words ◇ Literature ◇ Music ◆

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”.