2013-01-01 8 views
11

Was ist der Unterschied zwischen ist:Unterschied zwischen Auto, 0 und kein Z-Index?

  1. z-index: auto
  2. z-index: 0
  3. kein z-Index auf allen all

der oben genannten Szenarien für eine div ist, dass umschließt zwei Divs, Div1 und Div2, die jeweils einen Az-Index haben, der 9 bzw. 10 ist.

Das einschließende div befindet sich im Stapelkontext von html.

Antwort

11

Ohne Angabe z-index ist das gleiche wie z-index: auto; das ist sein Anfangswert.

auto und 0 bedeuten dasselbe, wenn Ihr Element keinen eigenen Stapelkontext erstellt; z.B. Es wird nicht als relativ, absolut oder fest positioniert.

Wenn Ihr einschließender div nicht positioniert ist, dann spielt es keine Rolle, was immer Sie z-index setzen; Es und sein gesamter Inhalt werden an dem Stapelkontext von html teilnehmen, und seine Nachkommen werden immer davor positioniert sein.

+0

Danke BoltClock.The; ast Absatz Ihrer Antwort erklärte alles so gut.Exakt, was ich suchte. – bluelurker

2

z-index: auto

Legt die Stapelordnung gleich seine Eltern. Dies ist Standard.

z-index: 0

tut nichts

z-index: nicht

Legt die Stapelordnung gleich seine Eltern gleich wie Auto.

z-index: erben

Gibt an, dass der z-Index aus dem übergeordneten Element

Referenz zur weiteren Lektüre und Prüfung übernommen werden sollte:

Link

+0

Wie BoltClock sagte, 'Z-Index: 0' macht es hinter Geschwistern, die nicht' Z-Index: 'haben. – jasonszhao

+0

@jaszszhao, das ist nicht wahr. z.B. siehe: https://jsfiddle.net/jf3bgL9z/3/ –

0

n CSS, Sie kann zwei oder mehr Objekte so positionieren, dass sie sich überlappen. Ihre Z-Indizes bestimmen, welche Objekte sich "vor" oder "hinter" anderen Objekten befinden, die sie überlappen. Je höher das z-Index des Objekts wird die „höher im Stapel“ von Objekten es angezeigt

1

z-index:0 ist immer die „Standardschicht“ (die Schicht, in der alle Elemente ohne eine explizites z-index befinden), und z-index:auto bedeutet: "Setzt die Stapelreihenfolge gleich ihrem übergeordneten". Da alle untergeordneten Elemente eines übergeordneten Elements standardmäßig in der "z-Schicht 0" - relativ zu ihrem übergeordneten Element beginnen, bedeutet in-affect z-index:auto und z-index:0 dasselbe: Sie befinden sich beide in der gleichen "Schicht" "und ihre Stapelreihenfolge entspricht den Standard-Stapelregeln, die Sie sehen können here.