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í:
- FIXOVÁNÍ 2: Fixní tabulka před tabulkou scrollovatelnou do šířky
- FIXOVÁNÍ 1: Fixní text při rolová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;
}