Z-indekss - CSS-triki

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

z-indexĪpašums CSS kontrolē vertikālo krāvuma elementu secību, kas pārklājas. Kā, kas parādās, it kā tas būtu fiziski tuvāk jums. z-indexietekmē tikai tos elementus, kuru pozīcijas vērtība nav static(noklusējums).

Elementi var pārklāties dažādu iemeslu dēļ, piemēram, relatīvā pozicionēšana to ir iedragājusi kaut kam citam. Negatīvā starpība ir pārvilkusi elementu pār citu. Absolūti izvietotie elementi pārklājas. Visdažādākie iemesli.

Bez jebkādas z-indexvērtības elementi tiek sakrauti tādā secībā, kādā tie parādās DOM (augšpusē ir redzams zemākais vienā un tajā pašā hierarhijas līmenī uz leju). Elementi ar nestatisku pozicionēšanu vienmēr būs redzami virs elementiem ar noklusējuma statisko pozicionēšanu.

Ņemiet vērā arī to, ka ligzdošanai ir liela loma. Ja elements B atrodas virs A elementa, A elementa pakārtotais elements nekad nevar būt augstāks par B elementu.

Ņemiet vērā, ka vecākajai IE versijai šī konteksta informācija ir nedaudz pieskrūvēta. Šeit ir jQuery labojums tam.

Vairāk informācijas

  • Ekrāna apraide: kā darbojas z-indekss
  • MDN dokumenti
  • Visaptverošs raksts: Z-indeksa izpratne
  • Racionālas z-indeksa vērtības

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Darbi Darbi Darbi Darbi 4+ 4+ Darbi