Z-indeks - CSS-trikovi

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

z-indexNekretnina u CSS kontrolira vertikalno slaganje redoslijed elemenata koji se preklapaju. Kao i u, koji se čini kao da vam je fizički bliži. z-indexutječe samo na elemente koji imaju vrijednost položaja koja nije static(zadana).

Elementi se mogu preklapati iz različitih razloga, na primjer, relativno je pozicioniranje prebacilo na nešto drugo. Negativna margina povukla je element preko drugog. Apsolutno postavljeni elementi međusobno se preklapaju. Svakakvi razlozi.

Bez ikakve z-indexvrijednosti, elementi se slažu redoslijedom kojim se pojavljuju u DOM-u (najniži dolje na istoj razini hijerarhije pojavljuje se na vrhu). Elementi s nestatičnim pozicioniranjem uvijek će se pojaviti na vrhu elemenata sa zadanim statičkim pozicioniranjem.

Također imajte na umu da gniježđenje igra veliku ulogu. Ako element B sjedi na vrhu elementa A, podređeni element elementa A nikada ne može biti veći od elementa B.

Imajte na umu da su starije verzije IE-a malo zabrljale ove kontekstualne stvari. Evo jQuery popravka za to.

Više informacija

  • Screencast: Kako funkcionira z-index
  • MDN dokumenti
  • Sveobuhvatan članak: Razumijevanje z-indeksa
  • Racionalne vrijednosti z-indeksa

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
Djela Djela Djela Djela 4+ 4+ Djela