Z-index - CSS-trükkök

Anonim
div ( z-index: 1; /* integer */ )

A z-indexCSS tulajdonság vezérli az átfedő elemek függőleges egymásra rakási sorrendjét. Mint abban, melyik jelenik meg, mintha fizikailag közelebb lenne hozzád. z-indexcsak azokat az elemeket érinti, amelyeknek az static(alapértelmezett) értéktől eltérő pozícióértéke van .

Az elemek többféle okból átfedhetik egymást, például a relatív pozícionálás valami másra bökte. A negatív margó az elemet egy másik fölé húzta. Az abszolút helyzetben lévő elemek átfedik egymást. Mindenféle ok.

z-indexÉrték nélkül az elemek abban a sorrendben halmozódnak, ahogyan a DOM-ban megjelennek (ugyanazon a hierarchián a legalsó lent van fent). A nem statikus helyzetű elemek mindig az alapértelmezett statikus helyzetű elemek tetején jelennek meg.

Vegye figyelembe azt is, hogy a fészkelés nagy szerepet játszik. Ha egy B elem az A elem tetején ül, akkor az A elem gyermekelemje soha nem lehet magasabb, mint a B elem.

Ne feledje, hogy az IE régebbi verziója kissé elcseszi ezt a kontextust. Itt van egy jQuery javítás erre.

Több információ

  • Screencast: Hogyan működik a z-index
  • MDN Docs
  • Átfogó cikk: A z-index megértése
  • Racionális z-index értékek

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
Művek Művek Művek Művek 4+ 4+ Művek