indeks Z nie działa z ustalonym pozycjonowaniem

422

Mam divz domyślnym pozycjonowania (tj position:static) oraz divz fixedpozycji.

Jeśli ustawię indeksy Z elementów, wydaje się niemożliwe, aby stały element poszedł za elementem statycznym.

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>
Rozwiń fragment kodu

Lub na jsfiddle tutaj: http://jsfiddle.net/mhFxf/

Mogę obejść ten problem, używając position:absolute elementu statycznego, ale czy ktoś może mi powiedzieć, dlaczego tak się dzieje?

(Wydaje się, że jest podobne pytanie do tego ( Naprawiono pozycjonowanie łamiące indeks Z ), ale nie ma zadowalającej odpowiedzi, dlatego pytam o to tutaj z moim przykładowym kodem)

css z-index DanSingerman
źródło

Odpowiedzi:

146

To pytanie można rozwiązać na wiele sposobów, ale tak naprawdę znajomość reguł układania pozwala znaleźć najlepszą odpowiedź, która Ci odpowiada.

Rozwiązania

<html>Elementem jest jedynym układania kontekst, więc po prostu przestrzegać zasad układania wewnątrz kontekstu stosu i widać, że elementy są ułożone w takiej kolejności

  1. Element główny kontekstu stosu ( <html>w tym przypadku element)
  2. Pozycjonowane elementy (i ich dzieci) z ujemnymi wartościami indeksu Z (wyższe wartości są układane przed niższymi wartościami; elementy o tej samej wartości są układane zgodnie z wyglądem w HTML)
  3. Elementy niepozycjonowane (uporządkowane według wyglądu w HTML)
  4. Pozycjonowane elementy (i ich dzieci) z wartością auto indeks Z (uporządkowane według wyglądu w HTML)
  5. Pozycjonowane elementy (i ich dzieci) z dodatnimi wartościami indeksu Z (wyższe wartości są układane przed niższymi wartościami; elementy o tej samej wartości są układane zgodnie z wyglądem w HTML)

Więc możesz

  1. ustaw indeks Z na -1, dla #underpozycjonowanego -ve indeks Z pojawi się za nie pozycjonowanym #overelementem
  2. tak ustawić pozycję, #overaby relativezasada 5 miała do niego zastosowanie

Prawdziwy problem

Deweloperzy powinni wiedzieć, co następuje przed próbą zmiany kolejności elementów na stosie.

  1. Po utworzeniu kontekstu stosu
    • Domyślnie <html>element jest elementem głównym i jest pierwszym kontekstem stosu
  2. Kolejność układania w kontekście stosu

Kolejność układania i reguły kontekstu układania poniżej pochodzą z tego łącza

Po utworzeniu kontekstu stosu

  • Gdy element jest elementem głównym dokumentu ( <html>element)
  • Gdy element ma wartość pozycji inną niż statyczna i wartość indeksu Z inną niż auto
  • Gdy element ma wartość krycia mniejszą niż 1
  • Kilka nowszych właściwości CSS tworzy również konteksty stosu. Należą do nich: transformacje, filtry, regiony css, media stronicowane i ewentualnie inne. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • Zasadniczo wydaje się, że jeśli właściwość CSS wymaga renderowania w kontekście poza ekranem, musi utworzyć nowy kontekst stosu.

Kolejność układania w kontekście stosu

Kolejność elementów:

  1. Element główny kontekstu stosowego (ten <html>element jest domyślnie jedynym kontekstem stosowym, ale każdy element może być elementem głównym kontekstu stosowego, patrz reguły powyżej)
    • Nie można umieścić elementu potomnego za elementem kontekstowym stosu głównego
  2. Pozycjonowane elementy (i ich dzieci) z ujemnymi wartościami indeksu Z (wyższe wartości są układane przed niższymi wartościami; elementy o tej samej wartości są układane zgodnie z wyglądem w HTML)
  3. Elementy niepozycjonowane (uporządkowane według wyglądu w HTML)
  4. Pozycjonowane elementy (i ich dzieci) z wartością auto indeks Z (uporządkowane według wyglądu w HTML)
  5. Pozycjonowane elementy (i ich dzieci) z dodatnimi wartościami indeksu Z (wyższe wartości są układane przed niższymi wartościami; elementy o tej samej wartości są układane zgodnie z wyglądem w HTML)
Mr_Moneybags
źródło
3
Niektórzy mogą też uznać to za pomocne: Czego nikt nie powiedział o Z-Index
Mentalista
450

Dodaj position: relative;do #over

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>
Rozwiń fragment kodu

Skrzypce

stephenmurdoch
źródło
14
updates.html5rocks.com/2012/09/... jest doskonałym źródłem informacji na temat interakcji ustalonej pozycji, wartości bezwzględnej i względnej z indeksem Z.
Czy
@marflar Cała przyjemność po mojej stronie. Btw, spójrz na swoje skrzypce. na końcu jest dodatkowy tag </body>i dodatkowy tag </html>.
Michel Ayres
2
Oto skrzypce demonstrujące kontekst stosu. Wyjaśniono to tutaj .
kdbanman
Usunięcie position: relativez elementu ponad naprawiło mój problem.
Alex G
thanksssssss <3
Karl Anthony Baluyot
32

z-index działa tylko w obrębie danego IE kontekstowego relative, fixedlub absolutepozycji.

indeks z dla względnego div nie ma nic wspólnego z z-indexabsolutnym lub stałym div.

EDYCJA To jest niepełna odpowiedź. Ta odpowiedź zawiera fałszywe informacje. Przeczytaj komentarz i przykład @ Dansingermana poniżej.

cusimar9
źródło
3
Czy możesz rozwinąć sposób działania indeksu Z w określonym kontekście i / lub podać odniesienie?
DanSingerman,
13
Indeks Z wpływa na kolejność dwóch div, nawet jeśli jeden jest względny względem położenia, a drugi jest absolutny.
Raffael,
65
Ta odpowiedź jest zła. Oto skrzypce demonstrujące kontekst stosu, jak to wyjaśniono tutaj . @Dansingerman.
kdbanman
1
Dzięki za twój jsFiddle @kbdanman, pomógł mi zrozumieć kontekst stosu za pomocą grafiki.
dhruvpatel
8
@JoeMorano, Wyższe z jest bliżej góry, niezależnie od położenia bezwzględnego lub względnego. Liczy się poziom w drzewie dokumentu. Div 4, 5, 6 są dziećmi div 3, podczas gdy div 1 i 2 są rodzeństwem div 3. Div 1 ma wyższą z niż div 3, więc div 1 znajduje się na div 3 i wszystkich jego dzieciach. Div 2 ma niższą Z niż div 3, więc div 3 i wszystkie jej dzieci są na szczycie div 2
kdbanman
31

ponieważ twój overdiv nie ma pozycjonowania, indeks Z nie wie, gdzie i jak go pozycjonować (iw odniesieniu do czego?). Po prostu zmień pozycję nad divem na względną, aby nie było żadnych skutków ubocznych na tej div, a wtedy pod-div będzie posłuszny twojej woli.

oto twój przykład na jsfiddle: Fiddle

edytuj : Widzę, że ktoś już wspomniał o tej odpowiedzi!

jestem poważny
źródło
18

Daj #undernegatyw z-index, np-1

Dzieje się tak, ponieważ z-indexwłaściwość jest ignorowana position: static;, co jest wartością domyślną; więc w kodzie CSS, który napisałeś, z-indexjest 1dla obu elementów bez względu na to, jak wysoko go ustawiłeś #over.

Podając #underwartość ujemną, będzie za każdym z-index: 1;elementem, tj #over.

Carlos Precioso
źródło
Miałem też ten problem - ustawienie div „under” na 0 działało dla mnie.
Mick Sear
5

Budowałem menu nawigacyjne. Mam overflow: hiddenw css mojej nawigacji, który ukrył wszystko. Myślałem, że to problem ze wskaźnikiem Z, ale tak naprawdę ukrywałem wszystko poza moją nawigacją.

thedanotto
źródło
0

zachowanie stałych elementów (i elementów bezwzględnych) zgodnie z definicją w specyfikacji CSS:

Zachowują się tak, jakby zostały odłączone od dokumentu i umieszczone w najbliższym ustalonym / absolutnie pozycjonowanym rodzicu. (nie cytat po słowie)

To sprawia, że ​​obliczenia zindex są nieco skomplikowane, rozwiązałem swój problem (ta sama sytuacja), dynamicznie tworząc kontener w elemencie ciała i przenosząc wszystkie takie elementy (które są klasyfikowane jako „moje stałe” wewnątrz tego elementu na poziomie ciała )

Bachszi
źródło