FIXOVÁNÍ 3: Z-index a pozicované prvky

Na DJPW se objevil dotaz, jak udělat, aby se roloval prvek vlevo podle celého webu nad určitým divem, ale aby se schoval pod jiným divem. Za pomoci různých z-indexů je to hračka. 

Nejdříve si doporučuji přečíst předchozí články z fixování:

Uvedu jednoduchý příklad: z-index:1 má menší váhu, než z-index: 2. A z-index:50 má menší váhu než z-index:2. Tím myslím, že to, co má vždy nejmenší váhu z-indexu je nejníže položené na stránce. A co má nejvyšší z-index je na stránce položeno nejvýše. Živá ukázka.

HTML:

<div id="fixovany">
FIXOVANÝ OBJEKT</div>
<div id="cast">
První text, přes který nebude vidět fixovaný panel
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="obsah">
Druhý text, nad kterým bude vidět fixovaný panel
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS: 

#fixovany {
    position:fixed; 
    width: 150px; 
    height: 150px; 
    top: 0; 
    left: 0; 
    background-color:lime; 
    z-index:2; /* Prvek druhý (2), takže je výše, než prvek první*/
}
 
#cast {
    position: absolute; 
    width: 100%; 
    height: 200px;
    top: 0;
    left: 0;
    background-color:yellow; 
    z-index:3; /* Prvek je první (1), takže je dole */
}
#obsah {
    background: red;
    z-index: 1;
    left: 0;
    
}

Napište komentář!