Skip to Content

Z-index a jeho chování

Vlastnost z-index nám umožňuje jakési překrývání elementů, která se dá přirovnat k práci s vrstvami pomocí CSS. Aplikuje se na elementy, které mají přidělenou vlastnost position s jinou hodnotu než static. Tato vlastnost určuje výšku elementu při překrývání vrstev na ose z a může nabývat hodnoty auto, která je jeho výchozí hodnotou. Dále můžeme přiřadit hodnotu kladného či záporného čísla. Co znamená, že výchozí hodnotou z-indexu je auto? V podstatě bude element bude umístěn do takové vrstvy, která mu náleží ve výchozím systému těchto vrstev.
Většinou záleží na pořadí elementů ve struktuře dokumentu Html. Při hodnotě auto se nejblíže k nám vykreslí element, jenž je uveden nejpozději. Příklad:...

<body>
 <div id="vzadu">
  Tento element se vykreslí vzadu</div>
 <div id="vepredu">
  Tento element se vykreslí vepředu</div>
</body>

V případě, že přiřadíme kladnou či zápornou hodnotu z-indexu se jeví vrstva očím nejvzdálenější s nejnižší prioritou. Čím vyšší číslo vrstva má, tím je nám blíže, a nezáleží ani na pořadí elementu v Html.
A jak je to s elementy vnořenými? Platí, že každý element vytváří pro podřízené elementy systém vrstev, ve kterém ten nadřazený element nese číslo 0. To znamená, že vnořený element například s hodnotami auto se vždycky objeví nad nadřazeným elementem. S hodnotou -1 se objeví pod ním. Je zajímavé, že různé kombinace hodnot z-indexu se jinak vykreslují např. ve starších verzích IE. Zde v tomto příkladu se ve vnořeném divu "d" zapíše z-index : -1, a ve všech prolížečích mimo například IE se tento ačkoli vnořený element zobrazí úplně vzadu. Ostatním elementům je přiřazena hodnota auto. (Zkuste se podívat na stránku v prohlížeči Internet Explorer, u všech ostatních se "d" schová za ostatní bloky).

z-index

<body>
 <div id="a">
  <p>A...</p>
 <div id="b">
  <p>B...</p>
 </div>
 </div>

  <p>Lorem ipsum</p>

 <div id="c">
  <p>C...</p>
 <div id="d">
  <p>D...</p>
 </div>
 </div>

  <p>Lorem ipsum</p>

</body>

CSS například může vypadat takto:

#a
{
background: #cf9;
padding: 1px;
border: 1px solid #693;
position: relative;
z-index: auto
}

#b
{
background: #9cf;
padding: 1px;
border: 1px solid #369;
position: absolute;
right: 4em;
top: 1em;
width: 33em;
height: 15em;
z-index: auto
}

#c
{
background: #cf9;
padding: 1px;
border: 1px solid #693;
position: relative;
z-index: auto
}
#d
{
background: #9cf;
padding: 1px;
border: 1px solid #369;
position: absolute;
right: 3em;
top: -5em;
width: 15em;
height: 8em;
z-index: -1
}

Je ale potřeba připomenout, že podřízené elementy dědí vlastnost toho nadřazeného elementu, a i kdyby jsme u vnořeného divu dali třeba hodnotu 2 a náš element, do kterého bude vložen, měl menší hodnotu (například 0) než druhý hlavní uzavřený blok (např.1), nikdy se nevykreslí výše.