Z-index 0 is over z-index 9999 why?

HTML & CSS
1

Hi,

I have a situation where z-index low is over z-index high

please look here http://www.w3schools.com/Css/tryit.asp?filename=trycss_zindex1

the code I used

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:33px;
top:0px;
z-index:0;

}
h1 {
z-index:777;
}
p{
z-index:777;
}
</style>
</head>

<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index 1 has higher priority.</p>
</body>

</html>
2

The z-index property only applies to positioned elements, i.e., elements whose position property has a value other than static (the initial value).

So the z-index:777 that you set for the h1 and p elements has no effect, since they aren’t positioned. If you add position:relative for those two elements, you’ll see a difference.

3

I see thank you very much.

4

Hi :slight_smile:

There are 4 position values.

static (default)
relative(moves elements visually, but keeps it where it was “physically”)
absolute(removes out of document flow where other elements don’t know it’s there)
fixed(a subform of absolute positioning where it is kept in the viewport)

static with a z-index does nothing since it isn’t positioned. Everything else with a z-index will take effect.

Cheers.

5