zamieszania z-index

Question

Artykuł w poniższym linku stwierdza, że ​​z-index Stacking ma zastosowanie tylko do rodzeństwa elementy: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Ale poniżej fragment pokazuje, że div, które mają różne rodzice są ułożone w odniesieniu do Z -indeks. Nakładka pozostaje nad tekstem i pod polem tekstowym, mimo że zarówno tekst, jak i pole tekstowe należą do tego samego rodzica, ale nie do nakładki. Jak to jest możliwe zgodnie z artykułem?

.overlay { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    display: block; 
 
    height: 100%; 
 
    left: 0; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 2; 
 
}

<div class="overlay" style="display: block;"></div> 
 

 
<div> 
 
    <div> 
 
    Some text that will remain under the overlay. 
 
    </div> 
 
    <div style="width:1000px;"> 
 
     <div style="width:50%;position:relative;z-index:2;"> 
 
      <div> 
 
       <input style="width:80%;"> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 

 
</div>

Answer 1

Problemem jest twój porównanie z-index rozpoczyna się od pierwszego relative lub absolute umieszczony element DOM. Więc zasadniczo css z-index ignoruje wszystkie elementy, które mają pozycję static.

<div class="overlay" style="display: block;"></div> 

<div style="position:relative;z-index:3;"> 
    <div> 
    Some text that will remain under the overlay. 
    </div> 
    <div style="width:1000px;"> 
     <div style="width:50%;"> 
      <div> 
       <input style="width:80%;"> 
      </div> 

     </div> 
    </div> 

</div> 

myślę, że to powinno działać dla ciebie

Answer 2

Dokumentacja brzmi:

Każdy układania kontekst jest całkowicie niezależna od jego rodzeństwa: tylko potomek elementy są brane pod uwagę przy układania jest przetwarzany.

To nie znaczy, że kontekst Stacking elementem sama jest niezależna od jego rodzeństwa, ale to oznacza, że ​​dzieci są.

Należy zauważyć, że konteksty układania są aktywne w obrębie "elementów pozycjonowanych". Pozycjonowane elementy to elementy z pozycją "względną", "bezwzględną" lub "ustaloną" i z-indeksem. Tylko pozycjonowane elementy są układane w stosy. W tym przypadku są tylko dwa pozycjonowane elementy. Same stosują konteksty, tak jak ich najbliższy przodek. Jednak te elementy nie mają przodka (udostępnionego). Na tej podstawie możemy powiedzieć:

Te elementy należą do tego samego ustawionego przodka (kontekst stosowy): rzutnia. Dlatego indeksy z-z dają oczekiwane wyniki (wyższy wskaźnik z oznacza na górze). Równy indeks z pojawia się w kolejności czytania (ostatnia na górze).

Utworzenie innego pozycjonowanego przodka łamie to zachowanie, jak pokazuje Leonid. Dzieje się tak, ponieważ tworzy to nowy kontekst układania niezależny.

Dodawanie krycie na drugi div również łamie ten problem, jako elementy, które muszą być przerysowane są (o dziwo) traktowane jako elementów pozycjonowanych (konteksty nowy układania):

<div class="overlay" style="display: block;"></div> 
<div style="opacity: 0.99;">...</div> 

Zobacz w działaniu: http://codepen.io/anon/pen/ENrOGx

---

Nadal go nie rozumiem?

Przeczytaj artykuł Philipa Waltons'a: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/. Wyjaśnia to naprawdę dobrze.

PS. Kto nie lubi dobrego pytania STACKING na przepełnienie STACK?