Why does z-index only work for positioned elements?

Question

I know that z-index only works with positioned elements, but I am wondering why this is the case. Is there a good reason for this behaviour or is it just one of those semi-arbitrary specification decisions?

I came across this issue when working with code like this:

HTML

<div>
    <img class="not-positioned" src="http://placekitten.com/g/200/300">
    <img class="positioned" src ="http://placekitten.com/g/400/500">
</div>

CSS

img {
    border: 2px solid black;
}

.positioned {
    position: relative;
    left: -60px;
    z-index: 1;
}

.not-positioned {
    z-index: 99;
}

http://jsfiddle.net/666nzL6j/

You'll notice that this works according to specification (the .not-positioned image is behind the .positioned image despite .not-positioned's higher z-index value), but I am having a hard time understanding the rationale for this behaviour.

Simple google search http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ — crazymatt, Feb 11 '15 at 22:20

score 5 · Accepted Answer · edited Dec 31 '21 at 16:13

Elements are positioned in all three dimensions

on the x-axis using left and right
on the y-axis using top and bottom
on the z-axis using z-index

Of course, z-index is not 100% similar to the others, as it only describes a stacking instead of a "real" position, but that's all you can do on the z-axis, since you don't have fixed boundaries on that axis.

So, you need to give an element a position value other than static if you want to set its z-index. If your problem is as simple as in your example, you can also give the other element a negative z-index:

.positioned {
    position: relative;
    left: -60px;
    z-index: -1;
}

Thanks for this explanation as well as an alternate method of setting z-index to -1. — Blake Frederick, Feb 11 '15 at 22:53

score 1 · Answer 2 · edited Dec 31 '21 at 16:11

1

From Mozilla Developer Network - position:

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

Thus, in order to change an elements position, you need to tell it not to be static and you do that by applying a position property.

Why does z-index only work for positioned elements?

HTML

CSS

2 Answers2

Linked