Novinky v CSS3: position fixed aneb pevné pozicování

Vítejte u našeho dalšího dílu seriálu o novinkách živé specifikace HTML5 do níž lze zařadit i součást CSS3. Dnes se podíváme na CSS vlastnost position a její hodnotu fixed. Tato vlastnost i její hodnota fixed, je ve specifikaci už nějakou tu dobu a není tak docela vlastností CSS3. Je však až teprve nyní, přibližně s vydáním nové specifikace, použitelná v praxi.

Smyslem této hodnoty je pozicovat prvek na stránce tak, aby se při posunu stránky držel stále na stejné pozici, v závislosti na oknu prohlížeče. Lze jej tedy využít například pro plovoucí menu, které bude uživateli k dispozici po celou dobu jeho prohlížení, a to i když odjede až k patičce dokumentu. K tomuto účelu je fixed velmi užitečný. Některé webové stránky fixně pozicují například i reklamy v jinak prázdných okrajích webu, což však působí velmi rušivě a nedovoluje to uživateli „utéct“ před reklamou jinak než opuštěním stránky.

Abych lépe a názorněji vysvětlil funkčnost fixed, předvedu malou ukázku. Najdete v ní menu, které se stále drží horního okraje prohlížeče, i když se stránkou libovolně pohybujete.

Position fixed je, jak definice říká, pozicovaný prvek k oknu prohlížeče a tak je tomu v každém případě. Nelze tedy prvek zanořit do skrolovaného divu a v něm ho definovat jako fixní k rohu tohoto divu. Position fixed je tedy nutno používat vždy v rámci celého dokumentu.

Fixní pozici elementu zapisujeme tímto způsobem:

#id_elementu {
	position: fixed;
  top:0px;
  left:50%;
	width:500px;
  margin-left:-250px;
}

V této ukázce kódu jsem záměrně použil pozici zleva 50 %. Pomocí fixního pozicování lze totiž velmi snadno centrovat prvek jak horizontálně, tak i vertikálně. Hodnota 50 % tedy v tomto případě znamená, že má být prvek umístěn do 50 procent okna prohlížeče. V 50 procentech by se však v tuto chvíli napozicoval horní levý roh elementu a element by ještě pozicovaný na střed okna nebyl. Toho jsem docílil použitím margin-left, kterým jsem elementu definoval vnější okraj na -250 px. V ukázce má totiž menu šířku 500 px. O polovinu jsem ho tedy posunul doleva a docílil tím toho, že bude prvek vždy horizontálně uprostřed okna. To samé lze i ve vertikálním směru jen s použitím vlastnosti top a margin-top.

Opět se můžete podívat na ukázku vycentrování elementu v obou směrech.

Pokud bych používal první ukázku v praxi, asi by bylo vhodné ji doplnit nějakým JavaScriptem, který by zajišťoval zprůhlednění prvku, pokud by se kryl s ostatním textem a následné zviditelnění po najetí myši na prvek. Vidět je to v poslední dnešní ukázce.

Podpora

Závěrem bych vám chtěl popřát mnoho zdaru s programováním webových stránek, ať už s využitím HTML5 nebo bez. V příštím článku se podíváme na trochu rozsáhlejší téma, kterým je API z rodiny HTML5 specifikace, a tím je Geolocation.