DIVs übereinander legen...

tobm_knows_best

Erfahrenes Mitglied
Hey zusammen,

wahrscheinlich wurde das schon 100x diskutiert, aber ich bin ein klein wenig ratlos im Moment... Ich würde gerne 2 Divs wie in der Abbildung hier übereinanderlegen (Die beiden weissen Flächen in der Mitte)

Schatten, verzerrte Darstellung etc in CSS sind mir geläufig - aber mit der DIV-Anordnung an sich hab ich´s jetzt nicht so...

Weiss jemand rat?

Hier mal fix ´n Beispiel:

bg_box.png
 

tombe

Erfahrenes Mitglied
Also im Grunde einfach so:

HTML:
<div style="position: absolute; z-index: 0; left: 100; top: 100; width: 300; height: 300; border-style: solid; background-color: #808080;"></div>
<div style="position: absolute; z-index: 1; left: 120; top: 120; width: 300; height: 300; border-style: dotted; background-color: #00FFFF;"></div>
 

countryqt30

Mitglied
Hier noch ein *besser* aussehendes Beispiel, das auf dem Prinzip von tombe aufbaut.

HTML:
<div style="position: absolute; z-index: 0; left: 100; top: 100; width: 200; height: 200; background:white; -webkit-box-shadow: 0 0 5px; -webkit-transform: rotate(0deg);"></div>
<div style="position: absolute; z-index: 1; left: 100; top: 100; width: 200; height: 200; background:white; -webkit-box-shadow: 0 0 5px; -webkit-transform: rotate(5deg);"></div>
<div style="position: absolute; z-index: 2; left: 100; top: 100; width: 200; height: 200; background:white; -webkit-box-shadow: 0 0 5px; -webkit-transform: rotate(-8deg);"></div>
<div style="position: absolute; z-index: 3; left: 100; top: 100; width: 200; height: 200; background:white; -webkit-box-shadow: 0 0 5px; -webkit-transform: rotate(-3deg);"></div>

Einfach mal z.B. hier reinkopieren: http://htmledit.squarefree.com/
 

Neue Beiträge