CSS / Mit CSS Bilder übereinander legen [IE|M|O|G]

von: Werner Zenk

Mit CSS (z-index) können Sie Objekte (Bilder, Text, Container, ...) übereinander legen (stapeln).

<div style="position: absolute; top: 170px; left: 210px; width: 100px; height: 60px;
 background-color: #FFFF97; z-index: 1;"> z-index: 1 </div>

<div style="position: absolute; top: 210px; left: 250px; width: 100px; height: 60px;
 background-color: #A4FFA4; z-index: 2;"> z-index: 2 </div>

<div style="position: absolute; top: 250px; left: 290px; width: 100px; height: 60px;
 background-color: #FF9F9F; z-index: 3;"> z-index: 3 </div>

<div style="position: absolute; top: 450px; left: 210px; 
 z-index: 1;"> <img src="bild1.gif"> </div>

<div style="position: absolute; top: 490px; left: 250px; 
 z-index: 2;"> <img src="bild2.gif"> </div>

<div style="position: absolute; top: 530px; left: 290px; 
 z-index: 3;"> <img src="bild3.gif"> </div>

z-index: 1

z-index: 2

z-index: 3

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!