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 - výchozí hodnota
  • relative
  • absolute
  • fixed - tato hodnota nelze příliš používat, jelikož ji nepodporuje MSIE.

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>

evaluation

comments

[1] juk
2008-07-18 00:08:16

Na piču...když se to CSS hodí do externího souboru, vypadá to úplně jinak, než když je to přímo v souboru html s kódem...

replied by [2] Dundee
[2] Dundee
2008-07-18 17:47:49

#1 juk: Obávám se, že jsi vedle, jak ta jedle :) Jediný rozdíl je, že styly umístěné přímo v tagu style mají větší prioritu než externě připojené styly. Rozhodně ale obojí zobrazuje naprosto stejně.

comments closed