Skrytá zákoutí CSS - pozicování prvků

Další lehce zapeklitou technikou v CSS je pozicování prvků. Provádí se pomocí vlastnosti position, která může nabývat čtyř hodnot:

Static znamená, že se prvek formátuje podle běžných postupů.

Relative prvek se zformátuje podle běžných postupů a po zformátování celého obsahu dokumentu se teprve posune o udané rozměry. Nová poloha prvku přitom neovlivní okolní prvky.

Absolute prvek, který musí mít pevně nastavené rozměry, se vyjme z okolního obsahu a formátuje se zcela zvlášť. Prvek se vůči ostatním nepozicovaným prvkům nachází o vrstvu výše a proto je může překrývat. Pozice prvku se vztahuje k omezujícímu bloku (vnitřnímu okraji) rodičovského prvku, který ale musí být také pozicován(i relativně). Pokud žádný z nadřezených (rodičovkých) prvků není pozicován, vztahují se vlastnosti TOP a LEFT k prvku BODY, respektive HTML (podle prohlížeče).

Pomocí těchto pár vědomostí můžeme vytvořit téměř cokoliv. třeba takovouto jednoduchou blbůstku:

Zdroják:

<div style="border:1px solid #000;position:relative;width:100px;height:100px;">

 <div style="border:1px solid #F00;position:absolute; width:43px; height:43px;top:0px;left:0px;"&  gt;</div>

 <div style="border:1px solid #0F0;position:absolute;width:43px; height:43px; top:55px; left:55px;"></div>

 <div style="border:1px solid #00F;position:absolute;width:8px; height:8px;top:45px; left:45px;"></div>

 </div>