CSS, HTML und Javascript mit {stil}

CSS z-index • Übereinander positionierte Blöcke

CSS z-index – Übereinander liegende positionierte Blöcke

Wenn absolut und fest positionierte Blöcke aus dem Textfluss genommen und beliebig positioniert werden, können sie übereinander liegen. Das passiert z.B. bei absolut positionierten Elementen, aber auch, wenn ein negativer margin einen Block über einen anderen schiebt.

Oben liegende Ebenen überlagern dabei u.U. unten liegende Blöcke. Die unteren Inhalte sind dann nicht mehr sichtbar.

Per Voreinstellung liegen absolut, fixed und relativ positionierte Elemente in der Reihenfolge übereinander, in der sie im Quelltext des HTML-Dokuments stehen – das zuletzt aufgeführte Element liegt oben.

CSS z-index kann diese Reihenfolge ändern und z.B. ein Element, das im Quelltext vor allen anderen Elementen liegt, über die folgenden Elemente anheben.

Cyan nach oben (z-index: 10)
Cyan nach ganz unten (z-index: -1)
Cyan nach unten ( z-index: 0)
Cyan zurück auf Ebene 3 (z-index: auto)
.box { position: relative; background: gray }
.box div { position: absolute }
     … 
<div class="box">
    <div style="background:beige"></div>
    <div style="background:green"></div>
    <div style="background:cyan"></div>
    <div style="background:blue"></div>
</div>

Das Beispiel zeigt eine häufig benutzte Technik für Slideshows: Der umfassende Block ist relativ positioniert, die Slides im Container sind absolut positioniert. Da die Slides dort nicht versetzt, sondern überdeckend positioniert sind, entscheidet der z-index, welches Element im Viewport sichtbar ist.

Aber wieso verschwindet das Element mit einem negativen z-index von der Bildfläche?

Die Einstellung »Cyan nach ganz unten« mit einem negativen z-index setzt die Cyan-Box unter alle anderen Blöcke – unter die umfassende graue Box und selbst unter den Textblock dieser Seite.

Auf nicht absolut, fixed oder relativ positionierte Elemente hat z-index zwar keine Wirkung, aber für sie gilt – vereinfacht gesagt – z-index: 0 ( oder bei einem tiefschürfenden Blick What You May Not Know About the Z-Index Property).

CSS z-index Werte

auto
(Voreinstellung) setzt den Wert der Stapelordnung auf den Wert des Elternelements.
number
kann eine positive oder negative ganzzahlige Zahl sein.

z-index ist immer ein »Integer« – ganzzahlig – und kann positiv oder negativ sein. Mit negativen Werten für z-index wandert das Element unter alle Elemente ohne z-index, auch unter alle Elemente, die nicht positioniert sind.

Wie Ebenen im Illustrationsprogramm

HTML-Elemente können also drei Dimensionen aufweisen. Die x- und y-Position wird im Viewport des Browsers angezeigt, die z-Achse liegt in Richtung auf den Betrachter. Je größer der Wert der CSS-Eigenschaft z-index, desto weiter oben liegt das Element. Anders gesagt, liegen Elemente mit größeren z-index-Werten über solchen mit niedrigeren Werten.

z-index im Viewport des Browsersz-index
CSS z-index bildet die z-Achse und bestimmt, welches Element über anderen Elementen liegt – ähnlich wie Ebenen in Illustrationssprogrammen (z.B. Adobe Illustrator, Photoshop oder Inkscape).

Animierte Slides mit z-index

z-index ist eine numerische Eigenschaft und lässt sich also animieren. Für eine »tabbed« Navigation oder eine Slideshow wird der z-index einer Slide erhöht, damit sie ganz nach vorn kommt.

BLAU
CYAN
GRÜN
ROT
<style>
.car {position: relative }
.slide {
   position: absolute; z-index:1;  
   transition: z-index 0.5s 0.5s;
}
.getup { z-index: 2; }
</style>
	
<div class="car">
   <div class="slide"></div>
   <div class="slide"></div>
   <div class="slide"></div>
   <div class="slide"></div>
</div>
<script>
var tabs = document.querySelectorAll('.tab');
var slides = document.querySelectorAll('.slide');
for (var i=0; i<tabs.length; i++) {
   tabs[i].onclick = function (eve) {
      var index = eve.target.dataset.num;
      slides[index].classList.add('getup');
      for (var k=0; k<slides.length; k++) {
         if (k != index) {
         slides[k].classList.remove('getup');
         }
      }
   }
}

</script>
z-index