z-index - Český CSS 3 manuál

HTML a CSS Manuál Pozicování a velikost z-index - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti z-index nastavujeme hloubku (z-souřadnici) HTML elementu na stránce. Pokud se více elementů překrývá, můžeme pomocí této vlastnosti nastavit pořadí v jakém se mají vykreslovat. Jinými slovy které budou vpředu a které vzadu. Vlastnost funguje pouze pro pozicované elementy, tedy s position: absolute, fixed a relative.

Hodnoty

  • auto (výchozí) - Pořadí vykreslování prvků je založeno na rodičovské elementu.
  • číslo - Číslo, určující pořadí, ve kterém se má element vykreslit. Čím vyšší číslo, tím je element výše.
  • inherit - Vlastnost z-index bude zděděna od rodičovského elementu.

Ukázka

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        opacity: 0.8;
                        width: 100px;
                        height: 100px;
                }
                #zeleny
                {
                        z-index: 3;
                        position: relative;
                        background-color: #01EB4B;
                        border: 1px solid green;
                }
                #modry
                {
                        z-index: 2;
                        position: absolute;
                        left: 50px;
                        top: 50px;
                        background-color: #4B89FF;
                        border: 1px solid blue;
                }
                #cerveny
                {
                        z-index: 1;
                        position: fixed;
                        top: 40px;
                        left: 80px;
                        background-color: #FF004B;
                        border: 1px solid red;
                }

                </style>
        </head>
        <body>
                <div id="modry">Prostřední</div>
                <div id="cerveny">Nejnižší</div>
                <div id="zeleny">Nejvyšší</div>
        </body>
</html>

Výsledek:

Ukázka překrývání elementů v CSS pomocí vlastnosti z-index

 

  Aktivity (1)

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
Pozicování a velikost - CSS vlastnosti

 

 

Komentáře

Avatar
Tomáš123
Člen
Avatar
Tomáš123:

V manuáli nie je spomenuté, že implicitne sa najvyššie vykreslí najposlednejší prvok v HTML dokumente.

Odpovědět 16.10.2015 18:51
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.