ForumWebservice und SEOWebhostingDesign ShopSoftware ShopLiteratur Shop

Sie sind hier: Startseite  » CSS-Tutorials » Ebenen erstellen

Ebenen erstellen


Layer ist absolut positioniert

Verschachtelte Ebenen ausrichten
In der unteren Ebene liegt die schwarze Grusskarte. Diese Ebene richtet ihre Position an der tieferen Ebene - in diesem Fall dem CMS-Content - aus.

Auf der Grusskarte liegen eine Ebene mit einem Bild sowie eine Ebene mit Text. Die Ebenen sind für Demonstrationszwecke rot gerändert - normalerweise sieht man ihre Dimension nicht.

Die Bild- und Textebenen dürfen sich auf der Ebene, in der die Grusskarte liegt, nicht verschieben. Ihre Position wird daher am einfachsten durch die Grusskarten-Ebene bestimmt (Abstand von links und von oben des Randes der Ebene, in der die Grusskarte liegt.)

Die Position des Textes kann innerhalb der Ebene normal formatiert werden.

Editieren


Liebe Grüsse
von CSS-Style !

Wie entsteht der Z-Index
Man sieht hier deutlich drei Ebenen (box1 bis box3) mit farbigem Hintergrund. Sie sind absolut in ihrem Eltern-Element positioniert. Die Reihenfolge der Ebenen richtet sich normaler Weise nach der Reihenfolge ihrer Definition im Body. Die rote Box3 erhielt hier jedoch den z-index:1;! Dadurch wird sie als untere (erste) Ebene dargestellt. Diese Reihenfolge lässt sich verändern, indem der jeweilige Z-Index geändert wird. Testen Sie dieses Beispiel in unserem Editierfeld, und verändern Sie die Reihenfolge!

Editieren

ElternElement
box1
box2
box3
Hier sehen wir eine Tabelle (gelb) und einen Layer (roter Rahmen). Die Position des Layers wird anhand des Abstandes zum linken und oberen Rand der Website definiert - in diesem Fall in px und verändert sich nicht.

Bitte probieren sie einmal selbst aus, wie die gelbe Tabelle ihre Position dem rechten Rand dynamisch anpasst, wenn Sie die Grösses Ihres Browserfensters verändern.

Der Layer mit rotem Rahmen behält seine Position jedoch hundertprozentig bei.

Editieren

Nach oben springen..

Druckerzeichen