Dzieci z-index: "auto" vs z-index: 0, a czym jest "stacking context" w CSS?

Question

Poprzednio uważałem, że element podrzędny nie może być zindeksowany względem elementu, który jest rodzajem elementu macierzystego, który ma wyższy indeks Z niż jego element nadrzędny. Na przykład divs A i B są rodzeństwem. Div A ma z-index 10, a div B ma z-index of 5. Div B posiada element dziecko: Div C, z z-index of 9999. Z mojego zrozumienia, div C będzie nie być umieszczone powyżej div A, ponieważ Rodzic div C (div B) ma niższy indeks Z niż div A. To prawda, chyba że div B ma indeks z "auto". Gdy div B ma indeks z "auto", który byłby "0", ponieważ dziedziczy on z ciał, div C pozycji ponad div A, mimo że indeks dB div B faktycznie wynosi LOWER niż był, gdy nie był " t działa.

Od specyfikacji CSS2, z-index „auto” jest zdefiniowany jako

Poziom stos generowanego pola w bieżącym kontekście układania 0. Pole nie ustanawia nowego kontekstu stosu, chyba że jest element główny.

mam problemy ze zrozumieniem „układania kontekst.” Wydaje się, że jedyną różnicą pomiędzy zdefiniowanym z-index 0, a domyślna „auto”, która jest 0, ale też nie ma kontekstu stosu . Dokładniej:

Dlaczego dzieci elementów bez zawartości układania są zindeksowane inaczej niż w kontekście układania?

Oto skrzypce, które pokazuje różnicę między z-index 0, a z-index auto. Zielony div jest dzieckiem niebieskiego div, a czerwony div jest rodzeństwem niebieskiego div.

http://jsfiddle.net/c7Tvt/

Answer 1

W przykładzie, masz dwa scenariusze, nazywają je Blue and Blue-2.

W kolorze niebieskim występują dwa konteksty układania, pierwszy zawiera #blue, a drugi zawiera #red i #green. #blue jest w swoim własnym kontekście stosu, ponieważ z-index: auto, a ten kontekst jest po prostu częścią domyślnego stosu.

W Blue-2 zdefiniowano z-index: 0 dla #blue, więc jest to część tego samego kontekstu stosowego, co #red. W Blue-2, #blue jest pomalowany jako pierwszy, ponieważ ma najniższy indeks Z, 0. Jednak #green jest dzieckiem o numerze #blue i zostaje zamalowane na #blue, element nadrzędny i podrzędny tworzą nowy kontekst stosowy (kontekst kontekstowy, jeśli chciałbyś). Wreszcie, #red jest pomalowany na niebieskozielonym stosie, ponieważ czerwony indeks Z ma wartość 2, która jest większa niż niebieski z-index równy 0. W tym przypadku wskaźnik Z zieleni ma wpływ na jego poziom układania w odniesieniu do niebieski i inne elementy podrzędne w #blue. W Blue-2 są trzy konteksty stosowe, domyślne (nr 1), jeden dla czerwonego i niebieskiego (# 2), a drugi niebieskie i zielone (# 3).

Kluczowym punktem
z-index: auto nie uruchamia dodać umieszczonego elementu do nowego kontekstu stosu natomiast z-index: 0 robi. Pamiętaj, że istnieje co najmniej jeden kontekst stosowy, domyślny zdefiniowany dla elementów na podstawie ich naturalnej kolejności HTML/DOM na stronie.

Uwaga: Pozwoliłem sobie opisywania pozycji wytyczania jakbyś miał dwie strony internetowe, jeden z #red, #blue, #green i drugi z #red2, #blue2, #green2. W rzeczywistości, ponieważ wszystkie div są na tej samej stronie, wszystkie poziomy stosu zawierają wszystkie elementy. Gdy w tym samym stosie znajdują się dwa czerwone elementy div, #red2 zostanie zamalowany na #red, ponieważ elementy znajdujące się w dalszej części drzewa DOM zostaną zamalowane na wcześniejsze elementy.

referencyjny
znalazłem następujący całkiem przydatne do czytania:
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2

Jeśli chcesz jeszcze więcej szczegółów, zajrzyj na:
http://www.w3.org/TR/CSS21/zindex.html