Relativní umístění

Relativní umístění pracuje následovně:

• Nejprve se prvek zformátuje obyčejně, jako by byl v normálním toku.
• Poté se jeho poloha změní tak, že se posune proti své původní poloze. Směr a velikost posunutí určují jeho vlastnosti top, right, bottom a left.
• Ostatní prvky na stránce se chovají, jako kdyby prvek zůstal ve své původní poloze. Čili „neuhýbají“ posunutému prvku.

Například budou první dvě slova následujícího odstavce jsou posunuta dolů o 3 em. Může za to jejich zařazení do třídy dolu, jež má v CSS definovány následující vlastnosti:

.dolu {
    position: relative;
    bottom: -3em;
}

Posunutá slova a za nimi normálně pokračuje řádek, jako by se nic nedělo. I další řádky si posunutého textu příliš nevšímají. Může se proto stát, že se s posunutým textem překryjí.