(Předchozí článek ze série) Potřebujete někdy něco důležitého „přichytit“ ke straně stránky, aby to návštěvníci měli stále na očích a jezdilo to se stránkou? Říká se tomu fixace. Pomocí CSS vlastnosti position: fixed můžeme cokoliv přichytit ke stránce. Nyní si vysvětlíme CSS kód:
- position: fixed — pevná a neměnná pozice, fixujeme objekt
- height a width — výška a šířka boxu (elementu) div
- left: 0px — popostrčení od levé strany stránky. Lze zaměnit za
- left (vlevo)
- right (vpravo)
- top (nahoře)
- bottom (dole)
- Vždy udáváme dvě vlastnosti pozice (vpravo, vlevo) a umístění (nahoře, dole)
HTML:
<div id="fixace-leva-horni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em.
Bude zarovnán doleva nahoru na stránku.</p>
</div>
<div id="fixace-prava-horni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em.
Bude zarovnán doleva nahoru na stránku.</p>
</div>
<div id="fixace-prava-dolni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em.
Bude zarovnán doprava dolů na stránku.</p>
</div>
<div id="fixace-leva-dolni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em.
Bude zarovnán doleva nahoru na stránku.</p>
</div>
CSS:
#fixace-leva-horni {
position: fixed;
background: red;
color: white;
height: 20;
width: 240px;
padding: 10px;
left: 0px; /* Tímto se určuje pozice na stránce - VLEVO */
top: 0px; /* Tímto se určuje pozice na stránce - NAHOŘE */
}
#fixace-prava-horni {
position: fixed;
background: blue;
color: white;
height: 20;
width: 240px;
padding: 10px;
right: 0px; /* Tímto se určuje pozice na stránce - VPRAVO */
top: 0px; /* Tímto se určuje pozice na stránce - NAHOŘE */
}
#fixace-prava-dolni {
position: fixed;
background: green;
color: white;
height: 20;
width: 240px;
padding: 10px;
right: 0px; /* Tímto se určuje pozice na stránce - VPRAVO */
bottom: 0px; /* Tímto se určuje pozice na stránce - DOLE */
}
#fixace-leva-dolni {
position: fixed;
background: orange;
color: white;
height: 20;
width: 240px;
padding: 10px;
left: 0px; /* Tímto se určuje pozice na stránce - VLEVO */
bottom: 0px; /* Tímto se určuje pozice na stránce - DOLE */
}