Mit CSS z-index Container in den Vordergrund bringen
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;"> </div>
<div style="background-color: #00ff00; position: absolute; top: 150; left: 150; width: 200px; height: 200px;"> </div>
</body>
</html>
Sie werden ein günes Kästchen im Vordergrund und ein rotes im Hintergrund sehen:
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;"> </div>
<div style="background-color: #00ff00; position: absolute; top: 150; left: 150; width: 200px; height: 200px; z-index: 1;"> </div>
</body>
</html>
Das Ergebnis wird nun folgendermaßen aussehen:
Tauschen Sie nun die Werte des z-Index wieder aus und der erste Container ist wieder im Hintergrund.
