Bilder mit z-index stapeln - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Besucher Statistik
» 2 Online
» 92 Heute
» 196 Gestern
» 92 Woche
» 441 Monat
» 26139 Jahr
» 355913 Gesamt
Record: 5293 (16.04.2022)
Gesamt Downloads:
Direkt zum Seiteninhalt

Bilder mit z-index stapeln

Scripte > Bildobjekte
Objekte staplen/versetzen mit z-index
Mit einer einfachen CSS-Definition, dem z-index, kannst Du Objekte (Bilder, Text, Container, usw.) übereinander legen oder versetzen, das heisst so positionieren, dass ggf. die Objekte sich auch überschneiden können.
Je höher das z-index, je höher ist die Ebene des Objektes. Zu beachten wäre nur, dass man ggf. eine Listung mit z-indexen führt, um den Überblich zu behalten. Ein z-index="9999" wäre nicht ungewöhnlich.
Es findet in der Grundgestaltung von Webseiten grundsätzlich oft unbemerkt Anwendung, auch hier in der Website. So wird z. B. bestimmt, dass das Menü sich vor und nicht hinter dem Body-Bereich öffnet.
Zum Einbau einfach den HTML-Code kopieren und in den BODY-Bereich <body>....</body> der aufrufenden Seite einfügen und nach eigenen Bedürfnissen anpassen.
Download Button

Beispiel mit Farbpalette:

Beispiel mit Bildobjekten:

z-index: 1
z-index: 2
z-index: 3
z-index: 4
z-index: 5
Bild 1
Bild 2
Bild 3
Bild 4
Bild 5
Code für den <BODY> Bereich
<div style="position: absolute; top: 0px;
left: 10px; width: 300px; height: 260px;
background-color: #FFFF97; z-index: 1;">
z-index: 1
</div>
<div style="position: absolute; top: 30px;
left: 50px; width: 250px; height: 210px;
background-color: #A4FFA4; z-index: 2;">
z-index: 2
</div>
<div style="position: absolute; top: 60px;
left: 90px; width: 200px; height: 160px;
background-color: #FF9F9F; z-index: 3;">
z-index: 3
</div>
<div style="position: absolute; top: 90px;
left: 130px; width: 150px; height: 110px;
background-color: #1F90FF; z-index: 4;">
z-index: 4
</div>
<div style="position: absolute; top: 120px;
left: 170px; width: 300px; height: 60px;
background-color: #7FFF00; z-index: 5;">
z-index: 5
</div>
Code für den <BODY> Bereich
<div style="position: absolute; top: 0px;
left: 10px; z-index: 1;">
<img src="wsX5Obj/Obj_IMG/img_1.jpg" alt="Bild 1"
style="width: 350px; height: 200px;">
</div>
<div style="position: absolute; top: 20px;
left: 30px; z-index: 2;">
<img src="wsX5Obj/Obj_IMG/img_2.jpg" alt="Bild 2"
style="width: 340px; height: 200px;">
</div>
<div style="position: absolute; top: 40px;
left: 60px; z-index: 3;">
<img src="wsX5Obj/Obj_IMG/img_3.jpg" alt="Bild 3"
style="width: 330px; height: 200px;">
</div>
<div style="position: absolute; top: 60px;
left: 90px; z-index: 4;">
<img src="wsX5Obj/Obj_IMG/img_4.jpg" alt="Bild 4"
style="width: 320px; height: 200px;">
</div>
<div style="position: absolute; top: 120px;
left: 10px; z-index: 5;">
<img src="wsX5Obj/Obj_IMG/img_5.jpg" alt="Bild 5"
style="width: 250px; height: 120px;">
</div>
Feedbacks zu ""
{PC_LOAD}
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2022

Hosting by
Zurück zum Seiteninhalt