Sie haben den Artikel erfolgreich in den Warenkorb gelegt.
Was möchten Sie als nächstes tun?
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:
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.