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

Martin Smola 24. 10. 2012

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.

widgety

 



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?
Vitalia.cz: 5 důvodů, proč jet na výlov rybníka

5 důvodů, proč jet na výlov rybníka

DigiZone.cz: DVB-T2 ověřeno: seznam TV zveřejněn

DVB-T2 ověřeno: seznam TV zveřejněn

Root.cz: Podívejte se na shořelé Samsung Note 7

Podívejte se na shořelé Samsung Note 7

DigiZone.cz: Jaká je Swisscom TV Air Free

Jaká je Swisscom TV Air Free

Vitalia.cz: Tradiční čínská medicína a rakovina

Tradiční čínská medicína a rakovina

DigiZone.cz: Technisat připravuje trojici DAB

Technisat připravuje trojici DAB

Podnikatel.cz: Nemá dluhy? Zjistíte to na poště

Nemá dluhy? Zjistíte to na poště

Lupa.cz: Proč jsou firemní počítače pomalé?

Proč jsou firemní počítače pomalé?

DigiZone.cz: Nova opět stahuje „milionáře“

Nova opět stahuje „milionáře“

120na80.cz: Co je padesátkrát sladší než cukr?

Co je padesátkrát sladší než cukr?

Lupa.cz: Odkazy na pirátský obsah mohou být nelegální

Odkazy na pirátský obsah mohou být nelegální

DigiZone.cz: Budoucnost TV vysílání ve Visegrádu

Budoucnost TV vysílání ve Visegrádu

DigiZone.cz: Parlamentní listy: kde končí PR...

Parlamentní listy: kde končí PR...

Vitalia.cz: Tesco nabízí desítky tun jídla zdarma

Tesco nabízí desítky tun jídla zdarma

Vitalia.cz: Vodárny varují: Ve vodě z kohoutku jsou bakterie

Vodárny varují: Ve vodě z kohoutku jsou bakterie

DigiZone.cz: Wimbledon na Nova Sport až do 2019

Wimbledon na Nova Sport až do 2019

Vitalia.cz: dTest odhalil ten nejlepší kečup

dTest odhalil ten nejlepší kečup

Vitalia.cz: Muž, který miluje příliš. Ženám neimponuje

Muž, který miluje příliš. Ženám neimponuje

Vitalia.cz: Test dětských svačinek: Tyhle ne!

Test dětských svačinek: Tyhle ne!

DigiZone.cz: Regionální tele­vize CZ vysílá "Mapu úspěchu"

Regionální tele­vize CZ vysílá "Mapu úspěchu"