Hlavní navigace

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

Martin Smola

Víte jak zajistit, aby měl uživatel stránek hlavní menu vždy po ruce, i když odjede na stránce někam dolů? Stačí použít vlastnost position: fixed, která s nástupem nových generací prohlížečů začíná mít smysl a je ji možné bez problémů použít. Ukážeme si tři příklady, které pevnou pozici na stránce využijí.

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

Google Chrome
OK
 
Mozilla Firefox
OK
 
Mozilla Firefox Mobile 6 a vyšší
OK
 
Opera
OK
 
IE6 a nižší
NE
 
IE7
OK*
Pouze při použití správného doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
IE8 a vyšší
OK
 
Opera Mobile 12.10
NE
 
Android Browser 2.2
NE
 
Android Browser 2.3 a vyšší
OK
 
Netscape 6 a vyšší
OK
 

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. 

Našli jste v článku chybu?