Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

CSS/Eigenschaften/Positionierung/z-index

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft z-index gibt an, in welcher Reihenfolge Elemente auf dem Ausgabemedium dargestellt werden. Elemente mit einem größeren z-index liegen dabei näher am Betrachter.

Beachten Sie: Elemente können nur einen z-index besitzen, falls sie über eine Angabe zu position verfügen, die von static abweicht oder sie flex-items sind.[1]

Ohne die z-index-Eigenschaft werden alle Elemente, deren Anzeigebereiche sich überlappen, in der Reihenfolge übereinandergelegt, in der sie im HTML-Quelltext definiert sind. Für jedes dieser HTML-Elemente kann ein z-index vergeben werden. Je größer der Wert, umso „höher“ liegt das Element. Ein Element mit z.B. dem z-index 10 überdeckt ein Element mit dem z-index 5.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>z-index</title>
    <style>
      main {
        position: relative;
      }
      aside {
        position: absolute;
        padding: 1.5em;
      }
      #element1 {
        background-color: rgba(128, 128, 128, .6);
        left: 2em;
        padding-bottom: 5em;
        top: 5em;
        z-index: 2;
      }
      #element2 {
        background-color: rgba(0, 0, 255, .4);
        left: 4em;
        top: 8em;
        z-index: 9;
      }
      #element3 {
        background-color: rgba(255, 215, 0 , .8);
        left: 6em;
        top: 11em;
        z-index: 0;
      }
      #element4 {
        background-color: rgba(128, 0, 0, 1);
        left: 10em;
        padding-left: 8em;
        top: 9em;
        z-index: -10;
      }
    </style>
  </head>
  <body>
    <h1>Verwendung von <code>z-index</code></h1>
    <main>
      <h2>Beispiel für die Überlappung der Elemente</h2>
      <aside id="element1">Element mit z-index 2</aside>
      <aside id="element2">Element mit z-index 9</aside>
      <aside id="element3">Element mit z-index 0</aside>
      <aside id="element4">Element mit z-index -10</aside>
    </main>
  </body>
</html>
Alle Elemente bekommen die position-Eigenschaft absolute und jedes weitere Element wird weiter unten und weiter rechts platziert. Außerdem bekommen sie zur Unterscheidung verschiedene Hintergrundfarben. Das erste Element wird genauso wie das dritte Element unter dem zweiten Element angezeigt, da es den größten z-index besitzt.

Das z-index-Attribut kann folgende Werte besitzen:

  • auto, Das Element wird automatisch nach der Reihenfolge im Quelltext positioniert. Später definiert bedeutet näher am Betrachter.
  • Eine ganze Zahl, Das Element wird wie oben beschrieben positioniert. Eine größere Zahl bedeutet näher am Betrachter.
  • inherit, z-index des Elternelements

Der Wert auto ist der Standard-Wert.

Beachten Sie: Sie sollten die z-Indices nicht lückenlos zuweisen, da Sie sonst bei nachträglichen Änderungen keine Elemente mehr „dazwischenschieben“ können.
Beachten Sie: Elemente mit einem positiven z-Index liegen „vor“ Elementen ohne z-Index, Elemente mit einem negativen z-Index „hinter“ Elementen ohne z-Index.

Stapelkontext[Bearbeiten]

Per z-index angeordnete Elemente erzeugen für ihre Kindelemente einen eigenen Stapelkontext. Das bedeutet, dass die Eigenschaft nur auf die Kindelemente selbst wirkt.

Beispiel ansehen …
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>z-index im eigenen Stapelkontext</title>
    <style type="text/css">
        /* einige Styleangaben hier weggelassen */
	ul {
	  position: absolute;
	  top: 5em;
	  left: 2em;
	  background: rgba(193, 168, 134, .6);
	}
	li {
	  position: absolute;
	  background: rgba(133, 192, 138, .8);
	}
	li:nth-child(1) { top: 1em; left: 3em; }
	li:nth-child(2) { top: 3em; left: 4.5em; }
	li:nth-child(3) { top: 5em; left: 6em; }
	li:nth-child(4) { top: 7em; left: 7.5em; }
	li:nth-child(5) { top: 9em; left: 9em; }
	aside {
	  position: absolute;
	  background: rgba(135, 69, 125, .7);
	}
	aside:last-of-type { 
	  top: 8em; right: 0;
	}
     </style>
  </head>
  <body>
    <section id="demo">
      <h1>z-index</h1>
      <aside style="z-index: 50">Element mit z-index: 50</aside>
      <ul style="z-index: 40">
	<li>z-index: auto</li>
	<li style="z-index: 80">z-index: 80</li>
	<li>z-index: auto</li>
	<li>z-index: auto</li>
	<li style="z-index: 10">z-index: 10</li>
      </ul>
      <aside style="z-index: 30">Element mit z-index: 30</aside>
    </section>
    <!-- Vergleich ohne z-index hier weggelassen -->
  </body>
</html>
Die grün eingefärbten li-Elemente bilden ihren eigenen Stapel, ihre z-index-Werte sind nur innerhalb dieses gültig. So überdeckt das Element mit dem z-index 80 alle anderen li-Elemente, nicht aber das div-Element mit dem z-index 50. Die z-index-Werte der div-Elemente und der Liste selbst definieren die Stapelreihenfolge dieser Elemente, ohne auf etwaige Kindelemente Rücksicht zu nehmen. Um ein Kindelement optisch hinter sein Elternelement zu positionieren, muss ein negativer z-index verwendet werden.

Quellen[Bearbeiten]

  1. sitepoint.com: How z-index and Auto Margins Work in Flexbox

Weblinks[Bearbeiten]