✔ DIVs übereinander legen...

[tobm_knows_best]

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:

 

[tombe]

Also im Grunde einfach so:

<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>

 

[tobm_knows_best]

Super Geil

Funktioniert Merci!

 

[countryqt30]

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

<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/