Div Ebenen überlappen mit CSS

Modernes Webdesign setzt immer größere Maßstäbe, um Inhalte interaktiver und interessanter zu gestalten. Im Gegensatz zu Tabellen und anderen HTML Containern, geben die Div Ebenen die Möglichkeiten Ebenen übereinander zu positionieren. Die Überlappung kann explizit mit CSS (Cascading Style Sheets) definiert und umgesetzt werden, jedoch muss ein Programmierer ein Paar CSS Vorgaben berücksichtigen, um die Div Ebenen an der richtigen Stelle zu haben und bestimmen zu können, welche Ebene ganz oben und welche ganz unten kommt.

Erläuterungen - überlappende Div Ebenen mit z-index

Bevor wir feststellen mit welcher CSS Eigenschaft zwei Divs sich überlappen können, müssten wir darüber erzählen was die verschiedenen Anzeigeformen von Div Ebenen existieren - dies ist die CSS Eigenschaft position:

• static - die Standardeinstellung, die Ebene wird als Block Element im Fließtext übernommen
• relative - von der Anzeigeposition der Ebene abhängigen Positionierung
• absolute - eine Position, die am Rande der nächsthöheren Ebene festgesetzt wird. Normalerweise sind absolute Divs direkt am Rande des Browsers angezeigt, es sei denn sie werden innerhalb von anderen Ebenen angezeigt, die position: relative; aufweisen. Dies ist was wir für überlappende Ebenen brauchen
• fixed - die Ebene steht immer an der gleichen Position und scrollt nicht mit

Einfach gesagt - wenn zwei Divs sich überlappen müssen und zwar nicht am Rande des Browsers, sondern innerhalb der Seite, so sollten diese position: absolute; haben und innerhalb einer übergeordneten Ebene sein, die position: relative; hat. Dieses Prinzip sollten Sie überall einsetzen, um die interaktive und sich überlappende Inhalte auf Ihrer Seite zu haben und damit ein tolles Webdesign hinzubekommen.

Nun ein Beispiel für Ihre sich überlappenden Div Ebenen:

Welche CSS Eigenschaften nutzen wir oben?

Die übergreifende Div Ebene hat position: relative, damit die darin enthaltenen Ebenen sich an ihrem Rande orientieren. Darüber hinaus haben Sie overflow: hidden, was aussagt, dass der Content der Ebene sie spannen soll. Die enthaltenen Ebenen sind position: absolute, wobei die erste direkt oben links am Rande ist (Standard ist left: 0px; und top: 0px;) und die zweite jeweils 20px von oben und links entfernt ist. Bei einer Breite und Höhe von 100px liegt die zweite offensichtlich im Rahmen der ersten Div Ebene. Nun kommt das Wichtigste - z-index. Damit sagen Sie welche Ebene über welche stehen soll. Die Ebene mit dem obersten z-index steht ganz oben. Wenn Sie mehr als zwei Ebenen haben, dann müssten Sie z-index entsprechend über alle verteilen.

Wenn Sie keine übergreifende Div Ebene haben, die position: relative aufweist, so orientieren sich die position: absolute Divs an den Body.

Somit sind Sie fertig! Viel Erfolg.

Tweet