div ( z-index: 1; /* integer */ )z-indexVlastnosť CSS riadi vertikálne prekrývanie poradí prvkov, ktoré sa prekrývajú. Ako v ktorom, ktorý sa javí, akoby bol fyzicky bližšie k vám. z-indexovplyvňuje iba prvky, ktoré majú inú hodnotu polohy ako static(predvolená).
Prvky sa môžu prekrývať z rôznych dôvodov, napríklad relatívne umiestnenie ich posunulo nad niečo iné. Záporná marža pretiahla prvok cez iný. Absolútne umiestnené prvky sa navzájom prekrývajú. Všelijaké dôvody.
Bez akejkoľvek z-indexhodnoty sa prvky hromadia v poradí, v akom sa nachádzajú v DOM (najnižšia nadol na rovnakej úrovni hierarchie sa zobrazuje hore). Prvky s nestatickým umiestnením sa vždy zobrazia nad prvkami s predvoleným statickým umiestnením.
Upozorňujeme tiež, že hniezdenie hrá veľkú rolu. Ak je prvok B umiestnený nad prvkom A, potom podradený prvok prvku A nemôže byť nikdy vyšší ako prvok B.
Všimnite si, že staršia verzia IE tento kontext trochu pokazila. Tu je oprava jQuery.
Viac informácií
- Screencast: Ako funguje z-index
- Dokumenty MDN
- Komplexný článok: Porozumenie z-indexu
- Racionálne hodnoty z-indexu
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Tvorba | Tvorba | Tvorba | Tvorba | 4+ | 4+ | Tvorba |