Why does the z-index only work for positioned elements?

Question

I know that z-index only works with positioned elements, but I wonder why this is so. Are there any good reasons for this behavior, or is this just one of these semi-arbitrary decisions?

I ran into this problem when working with this code:

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 will notice that this works according to the specification (the image .not-positionedis behind the picture .positioned, despite the .not-positionedhigher z-index value), but it’s hard for me to understand the rationale for this behavior.

Thank.

Answer 1

Elements are located in all three dimensions.

• x left right
• y top bottom
• z z-index

, z-index 100% , "" , , z, .

, position , static, z-index. , , z-index

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

Answer 2

Mozzilla - https://developer.mozilla.org/en-US/docs/Web/CSS/position

CSS , .

, , , , , position.

: https://developer.mozilla.org/en-US/docs/tag/Understanding_CSS_z-index