CSS Ebenen/Layer

Mit CSS ist es möglich Elemente auf einer Webseite absolut anzugeben, d.h. mit festgelegten „Koordinaten“ ausgehend vom Browserfenster. Damit kann man seine Objekte frei platzieren und sogar übereinander legen (überlappen lassen) – Hierfür kann man unter den Elementen eine Hierarchie festlegen.

Zuerst wird im HTML-Code das betreffende Objekt oder auch mehrere (in meinem Beispiel eine einfache Box) mit einer Klasse versehen:

<div class="box_1"></div>
<div class="box_2"></div>
...

In der CSS-Datei wird nun das Verhalten der Box/Klasse wie folgt festgelegt:

.box_1{
position: absolute; // absolute Position der Box
left: 0px; // Entfernung vom linken Rand
top: 40px; // Entfernung vom oberen Rand
width: 200px;
height: 200px
background: #000000;
border: 1px solid #CCCCCC;
padding: 15px;
z-index: 1;
// Index-Hierarchie
}

Es können weitere Boxen angelegt werden. Um die Boxen überlappen zu lassen, muss der Index geändert werden. Je höher der Index, desto weiter oben liegt die Ebene.

So kann man seine Seite individuell gestalten und hat fast unbegrenzte Möglichkeiten.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.