Verwaltung des Z-Index in Ihrem Code - Dummies

Wenn Sie die absolute Positionierung verwenden, können Sie genau bestimmen, wo sich die Dinge befinden, damit sie sich überlappen können. Standardmäßig werden Elemente, die später in HTML beschrieben werden, über den zuvor beschriebenen Elementen positioniert.

Verarbeitungstiefe in CSS

Sie können ein spezielles CSS-Attribut namens z-index verwenden, um dieses Standardverhalten zu ändern. Die z -Achse bezieht sich darauf, wie nahe ein Element für den Betrachter zu sein scheint. Dieses Bild zeigt, wie das funktioniert.

Mit dem Z-Index können Sie ändern, welche Elemente näher am Benutzer erscheinen.

Das Z-Index Attribut erfordert einen numerischen Wert. Höhere Zahlen bedeuten, dass das Element näher am Benutzer ist (oder bei top). Jeder Wert für z-index platziert das Element höher als Elemente mit dem Standard z-index . Dies kann sehr nützlich sein, wenn Sie Elemente haben, die über anderen Elementen angezeigt werden sollen (z. B. Menüs, die temporär über anderen Text angezeigt werden).

Hier ist der Code, der den Z-Index -Effekt darstellt:

zindex. html

#blueBox {

Hintergrundfarbe: blau;

Breite: 100px;

Höhe: 100px;

Position: absolut;

links: 0px;

oben: 0px;

Rand: 0px;

Z-Index: 1;

}

#blackBox {

Hintergrundfarbe: schwarz;

Breite: 100px;

Höhe: 100px;

Position: absolut;

links: 50px;

oben: 50px;

Rand: 0px;

}

Arbeiten mit dem Z-Index

Die einzige Änderung in diesem Code ist das Hinzufügen der Z-Index -Eigenschaft. Je höher ein Z-Index-Wert ist, desto näher erscheint das Objekt dem Benutzer.

Hier einige Dinge, die Sie bei der Verwendung von z-index beachten sollten:

• Ein Element kann ein anderes vollständig verbergen. Wenn Sie beginnen, Dinge absolut zu positionieren, kann ein Element scheinbar verschwinden, weil es vollständig von einem anderen abgedeckt wird. Das Z-Index -Attribut ist eine gute Möglichkeit, diese Situation zu überprüfen.
• Negativ Z-Index kann problematisch sein. Der Wert für z-index sollte positiv sein. Obwohl negative Werte unterstützt werden, behandeln einige Browser (insbesondere ältere Versionen von Firefox) diese nicht gut und können dazu führen, dass Ihr Element verschwindet.
• Es kann am besten sein, allen Werten einen Z-Index zu geben. Wenn Sie den Z-Index für einige Elemente definieren und den Z-Index für andere undefiniert lassen, haben Sie keine Garantie, was genau passieren wird. Im Zweifelsfall geben Sie jedem Wert seinen eigenen Z-Index und Sie wissen genau, was was überlappen soll.
• Geben Sie nicht zwei Elemente den gleichen Z-Index . Der Punkt des Z-Index soll klar definieren, welches Element näher erscheinen soll. Beseitigen Sie diesen Zweck nicht, indem Sie zwei verschiedenen Elementen auf derselben Seite den gleichen Wert z-index zuweisen.