Z-Index ohne absolute Position

Aufgrund von CSS-Tricks wie negativen Rändern habe ich gelegentlich etwas HTML, das unter HTML-Inhalt gerendert wird, der später im HTML-Dokument erscheint. Obwohl die ursprünglichen Elemente technisch unter den späteren Elementen liegen sollten, möchte ich die über den späteren Elementen anzeigen.

Ist es möglich, ein HTML-Element über einem anderen Element erscheinen zu lassen, ohne eine absolute Position angeben zu müssen? Es scheint nicht, dass der Z-Index ohne eine absolute Position eine Wirkung hat.

Ja: benutzen position:relative; z-index:10.

z-index hat keine Wirkung für position:static (der Standard).

Beachten Sie, dass der Z-Index kein globales Schichtsystem ist, sondern nur die Reihenfolge innerhalb jedes positionierten übergeordneten Elements unterscheidet. Wenn Sie haben:

<style type="text/css">
  div { position:relative }
  #a  { z-index:1  }
  #a1 { z-index:99 }
  #b  { z-index:2  }
</style>
...
<div id="a"><div id="a1">SUPER TALL</div></div>
<div id="b">I WIN</div>

…dann #a1 wird nie oben rendern bWeil #b darüber geschichtet ist #a. Sie können eine Demo davon unter sehen http://jsfiddle.net/DsTeK

Ich weiß, dass die Antwort von Phrogz bereits akzeptiert wurde, und es ist eine gute Antwort, aber nur fürs Protokoll: Sie müssen nicht immer z-index.

Wenn du. .. hast position:relative auf einem Element wird es auch über allen anderen Elementen angezeigt, die keine haben position (oder position:static). Auch wenn Sie überhaupt keine Z-Indizes haben!

jsFiddle.