7 8723

Heute erkläre ich Ihnen, wie man einen Container ein Image oder was auch immer aus dem Hintergrund in den Vordergrund bringen kann.

Ich nehme mal einfach folgendes Beispiel: Zwei div Container mit unterschiedlichen Hintergrundfarben.

Beispielcode:

<html>
 <body>
  <div style="background-color: #ff0000; position: absolute; top: 100; left: 100; width: 200px; height: 200px;">&nbsp;</div>
  <div style="background-color: #00ff00; position: absolute; top: 150; left: 150; width: 200px; height: 200px;">&nbsp;</div>
 </body>
</html>

Sie  werden ein günes Kästchen im Vordergrund und ein rotes im Hintergrund sehen:

Beispiel Kästen für z-index

Um nun beide DIV-Container miteinander zu vertauschen und das hintere in den Vordergrund zu bringen, verwenden wir den z-index. Der Container mit dem höchsten z-index ist im Vordergrund zu sehen.

Beispielcode:

<html>
 <body>
  <div style="background-color: #ff0000; position: absolute; top: 100; left: 100; width: 200px; height: 200px; z-index: 2;">&nbsp;</div>
  <div style="background-color: #00ff00; position: absolute; top: 150; left: 150; width: 200px; height: 200px; z-index: 1;">&nbsp;</div>
 </body>
</html>

Das Ergebnis wird nun folgendermaßen aussehen:

z-index-Beispiel

Tauschen Sie nun die Werte des z-Index wieder aus und der erste Container ist wieder im Hintergrund.