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:
<code>
<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 grünes Kästchen im Vordergrund und ein rotes im Hintergrund sehen:
<code>
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:
<code>
<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:
<code>
Tauschen Sie nun die Werte des z-Index wieder aus und der erste Container ist wieder im Hintergrund.
Wofür steht eigentlich der z-index?
Sicherlich kennen Sie Graphen mit X- und Y-Achsen.
In einem dreidimensionalen Graphen gibt es dazu die Z-Achse für die Tiefe.
Z-Achsen kommen deshalb auch typischerweise in 3D Programmen vor.
Und auch auf Webseiten im CSS.
Author: Andreas Lang
Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash.
Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
