FIXOVÁNÍ 2: Fixní text při rolování (scrollování)

(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 */
}

Živá ukázka

Zdrojový kód

Napište komentář!