CSS: z-index

By Xah Lee. Date: . Last updated: .
css z index

z-index controls the stacked layer order, of overlapping elements.

“z-index” can be 0 or negative, or positive.

The larger the value, the more it is on top.

The default value of CSS z-index is 0.

Example

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

Both have position:fixed. One of them has larger z-index than the other, so it's in front.

RED BOX
YELLOW BOX

Here's the code:

<div id="red39328">RED BOX</div>

<div id="yellow60517">YELLOW BOX</div>
#red39328
{
width:128px;
height:128px;
position:fixed;
bottom:350px;
right:350px;
z-index:5;
background-color:red
}

#yellow60517
{
width:128px;
height:128px;
position:fixed;
bottom:300px;
right:300px;
z-index:6;
background-color:yellow
}

z-index

The “z-index” is meaningful only for elements that has one of:

[see CSS Position: static, relative, fixed, absolute]

Reference

Visual formatting model#propdef-z-index

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc