Z indeksas - CSS-gudrybės

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

z-indexCSS nuosavybė kontroliuoja vertikalios krovimas tvarka elementų, kurie sutampa. Kaip ir kuriame, kuris atrodo tarsi fiziškai arčiau tavęs. z-indexpaveikia tik tuos elementus, kurių pozicijos vertė yra ne static(numatytoji).

Elementai gali sutapti dėl įvairių priežasčių, pavyzdžiui, santykinis padėties nustatymas jį sukrėtė dėl kažko kito. Neigiama marža patraukė elementą virš kito. Visiškai išdėstyti elementai sutampa. Visokių priežasčių.

Neturėdami jokios z-indexvertės, elementai kaupiasi tokia tvarka, kokia jie yra DOM (viršuje rodomas žemiausias tas pats hierarchijos lygis žemyn). Elementai su nestatiniu padėties nustatymu visada bus rodomi ant elementų su numatytuoju statiniu padėties nustatymu.

Taip pat atkreipkite dėmesį, kad lizdą vaidina didelis vaidmuo. Jei elementas B yra ant A elemento viršaus, A elemento antrinis elementas niekada negali būti aukštesnis už B elementą.

Atkreipkite dėmesį, kad senesnė IE versija šiek tiek sugadina šį kontekstą. Čia yra „jQuery“ pataisymas.

Daugiau informacijos

  • „Screencast“: kaip veikia „z-index“
  • MDN dokumentai
  • Išsamus straipsnis: supratimas apie z indeksą
  • Racionalios z indekso vertės

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Veikia Veikia Veikia Veikia 4+ 4+ Veikia