Z-indeks - CSS-trikid

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

z-indexVara CSS kontrollib vertikaalne virnastamine järjekorras elemendid, mis kattuvad. Nagu sisse, kumb ilmub, nagu oleks see teile füüsiliselt lähemal. z-indexmõjutab ainult elemente, millel on muu positsiooni väärtus kui static(vaikimisi).

Elemendid võivad kattuda mitmel põhjusel, näiteks suhteline positsioneerimine on selle nihutanud millegi muu üle. Negatiivne marginaal on elemendi teise üle tõmmanud. Absoluutselt paigutatud elemendid kattuvad üksteisega. Igasugused põhjused.

Ilma igasuguse z-indexväärtuseta virnastavad elemendid DOM-is ilmuvas järjestuses (kõige madalam samal hierarhiatasandil allapoole kuvatakse üleval). Mittestaatilise positsioneerimisega elemendid kuvatakse alati staatilise vaikepositsiooniga elementide kohal.

Pange tähele ka seda, et pesitsemisel on suur roll. Kui element B istub elemendi A peal, ei saa elemendi A alamelement kunagi olla kõrgem kui element B.

Pange tähele, et IE vanem versioon muudab selle kontekstivärvi natuke keeruliseks. Siin on selle jaoks jQuery parandus.

Rohkem informatsiooni

  • Ekraanikuva: kuidas z-indeks töötab
  • MDN-i dokumendid
  • Põhjalik artikkel: Z-indeksi mõistmine
  • Ratsionaalne z-indeksi väärtus

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Töötab Töötab Töötab Töötab 4+ 4+ Töötab