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.
Beispiel mit Farbpalette:
Beispiel mit Bildobjekten:
z-index: 1
z-index: 2
z-index: 3
z-index: 4
z-index: 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 ""
Bitte Dein Feedback
Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.
Vielen Dank für Dein Feedback.
Daniela Baris
29.08.2015, 17:25+0 -0
funktioniert super. Doch leider wird der HTML Code nicht gespeichert. Wird die Vorschau geschlossen ist es wieder wie davor.
Ich habe eine Text- Datei mit eingefügten Bilder. Da ich in HTML nicht fit genug bin, sollte dies auch so bleiben. :-)
Tipps?? BZW: Wie komme ich außer über die Vorschau zum hinterlegten HTML- Code?
Vielen Dank
Dani
Hallo Dani, verstehe Dein Anliegen nicht so richtig.
Mit welchem Programm arbeitest Du?
Mach mal einen Screenshot, wo der Code drin ist.
Der Code gehört in ein HTML/Widget-Objekt und die Bilder müssen dann auf dem Server im Ordner images liegen.