Alles über .... Z-Index?

Question

Diese Eigenschaft lässt mich verwirren.

gut .. ich in google gesucht:

Was ist der z-index?

Die Eigenschaft z-index gibt die Stapelreihenfolge eines Elements an. Ein Element mit größerer Stapelreihenfolge befindet sich immer vor einem Element mit einer niedrigeren Stapelreihenfolge. Hinweis: Der Z-Index funktioniert nur bei positionierten Elementen (Position: absolut, Position: relativ oder Position: fixiert).Answer Source

Was verwendet der Z-Index?

Die Reihenfolge, in der sich die Elemente überlappen. Zu diesem Zweck können Sie jedem Element eine Nummer (Z-Index) zuweisen. Das System besteht darin, dass ein Element mit einer höheren Nummer ein Element mit einer niedrigeren Nummer überlappt.

Ok ich verstehe jetzt, es organisieren die Elemente und wir können jede Zahl verwenden ... die höhere Z-Index Nummer erscheint auf allen Elementen..ok nett.

z-index and jquery ..very einfach und sehr schön

... aber ich bemerkte, aus den Antworten, die sie auf Position Eigenschaft ab, so -> ... (google) ..

Was ist die Beziehung zwischen Z-Index und Position?

demo--> >>source

Ok ... so z-index und Position couple..must zusammen sein ..

mehr Informationen benötigen ::

Dosis es jeder machen Konflikte in Browsern (IE7, IE8, Chrome, ... usw.)?

Was sind die Z-Index verwendet oder was können wir mit Z-Index (abhängig von den Tags) tun?

... usw.?

korrigieren Sie mich, wenn ich falsch verstehen ...

Vielen Dank im Voraus.

Answer 1

Z-Index ist die Eigenschaft, die bestimmt, welches HTML-Element über einem anderen HTML-Element angezeigt wird, wenn sie sich überlappen. Die Grundidee ist, dass das Element mit dem höchsten Z-Index "oben" ist.

Standardmäßig haben Elemente einen Z-Index von Null, aber wenn die css-Eigenschaft für ein Element auf 1 gesetzt wird und ein anderes auf 5, wird das letztere Element bei Überlappung "aufgelegt".

So weit, so einfach, aber es gibt einige Dinge zu beachten.

Einer, wie bereits in einer anderen Antwort erwähnt, ist, dass z-Index nur eine Wirkung hat, wenn das Element mit der Position absolut, fest oder relativ positioniert ist. (d. h. die CSS-Eigenschaft "position"). Ein unpositioniertes Element hat einen Z-Index von Null.

Um die Dinge weiter zu komplizieren (und meiner Erfahrung nach der Bereich, der oft nicht verstanden wird) ist das Konzept des Stapelkontextes. Weitere Informationen finden Sie in Artikeln wie this. Kurz gesagt, jedes Mal, wenn Sie einen neuen Z-Index explizit festlegen, starten Sie einen neuen Stapelkontext. Alle untergeordneten Elemente desjenigen, in dem der z-Index festgelegt wurde, befinden sich jetzt in diesem neuen Statuskontext, der sich über oder unter einem Stapelkontext auf einem anderen nicht-geleiteten Element befinden kann.

Was bedeutet dieser Stapelkontext? Dies bedeutet, dass ein Element mit einem Z-Index von 100 nicht notwendigerweise über einem Element mit dem Z-Index von 1 liegt. Wenn sie sich in verschiedenen Stapelkontexten befinden, ist nur der Z-Index des Stapelkontexts selbst von Bedeutung.

Answer 2

Ich würde vorschlagen, sich dieses Objekt unter SmashingMagzine.

The Z-Index CSS Property: A Comprehensive Look

Es deckt alle Muttern und Schrauben dieser Eigenschaft mit großen Beispielen und Demonstrationen.

Answer 3

die wichtigste Sache zu erinnern ist, dass z-index funktioniert nur, wenn die Elementposition relativ hat, absolute oder

feste

Answer 4

Ich bin nicht ganz sicher, was Sie fragen, aber für die meisten teiligen Sie Sie müssen den Z-Index immer verwenden, wenn Sie komplizierte Formatierungen vornehmen, z Hover Tooltips oder Dropdown-Navigationen, einfach um sicherzustellen, dass sie über anderen Seiteninhalt angezeigt werden.

Für grundlegende Entwerfen Sie in der Regel vermieden werden sollte, um die Position und z-Index-Eigenschaften mit, wie Sie in der Regel die gleichen Effekte mit einer besseren Leistung und Browser-Kompatibilität erreichen mit nur usw. schwimmt

Das Smashing Magazine Link von Sarfraz geschrieben ist ein ausgezeichneter Artikel zu diesem Thema und ein guter Anhaltspunkt, wenn Sie immer noch Schwierigkeiten haben, die Funktionalität der Immobilie zu verstehen.