• Box model
    •
  • Position
    •
  • Display
    •
  • Pseudo
    •

    Position

    CSS pozicování je důležitý koncept pro umisťování prvků na webové stránky.

    Typy

    1. Statická: Toto je výchozí nastavení. Prvek se řadí do normálního toku dokumentu.
    2. Relativní: Posune prvek o určitou vzdálenost od jeho normální pozice. Okolní text se formátuje bez ohledu na tento posun.
    3. Absolutní: Umístí prvek na přesné souřadnice na stránce, nezávisle na okolním textu. Je vyjmut z toku dokumentu.
    4. Fixní: Podobné jako absolutní, ale zůstává na stejném místě i při posouvání stránky.
    5. Sticky: Prvek je relativní, dokud není dosaženo určitého bodu na stránce, poté se chová jako fixní.

    Vlastnosti

    top, left, right, bottom
    Určují směr a míru posunutí.
    top posouvá dolů, left doprava.
    Velikost posunu může být v jednotkách jako px, pt nebo cm.

    Použití

    Relativní pozice se často používá pro jemné posuny.
    Absolutní pozice je mocnější a umožňuje umístit prvek kamkoliv na stránce.
    Příklad
    HTML
    
<span style="position: relative; top: 20px;">
    Relativně umístěný text
</span>
<span style="position: absolute; top: 100px;">
    Absolutně umístěný text
</span>