✔ DIVs übereinander legen...

T

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
 
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>
 
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/
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück