Hur funkar z-index?

Jag har länge funderat på vad z-index är och hur det funkar. Hör sökt på forumet och sett att några fler har frågat men ingen har svarat.

Jag gissar vilt på att det har med "höjd-skillnad" för att kunna lägga olika lager/divvar på varann...?

Kan nån ge en kortfattad förklaring?
Tack på förhand! :)

x-index = horisontellt
y-index = vertikalt
z-index = djup

Ju högre z-index ett element har, desto närmare skärmen är det.

#foo {
z-index: 5
}

#bar {
z-index: 8
}

Om de överlappar varandra kommer bar synas.

...men endast om båda är "positionerade".

Ok, så jag var inte helt fel ute alltså?

Blir bägge synliga om man inte har nån bild eller bakgrundsfärg?

Ja, men det är fortfarande en av dem som är "framför".

Om båda är opositionerade är den som kommer sist i källkoden framför.

Om bara en av dem är positionerad är den framför.

Om båda är positionerade är den med högst z-index framför. Har de samma z-index kommer den sista framför.

Ett positionerat element skapar sin egen z-index-kontext (tex dess barn kan inte komma bakom föräldern eller förälderns syskon som är bakom föräldern, även om de har högre z-index än barnet, och vice versa).

Att ett element är positionerat betyder att det beräknade värdet av 'position' nånting annat än static.

Ah, jag förstår!

Tack bägge två för den lilla "duvningen"! :-)