Position – css vlastnost definující pozici HTML prvku na webové stránce
CSS vlastnost position definuje pozici HTML prvku (např. DIV...) vůči svému okolí, tj. vůči ostatním HTML prvkům, případně vůči oknu internetového prohlížeče.
Existuje v CSS 1, 2 a 3 | není dědičná
Způsob zápisu
Ukázka zápisu umístění DIVu id=identifikator k oknu prohlížeče vlevo nahoře:
div#identifikator {
position: fixed;
top: 0;
left: 20px;
}
Standardně se HTML prvky seřazují podle toho, v jakém pořadí jsou napsány v HTML dokumentu, a to seshora dolů a v případě našeho jazyka také zleva doprava. Toto chování je možné změnit, jak si popíšeme níže v tomto článku.
Hodnoty používané u position
position: fixed
Position fixed se používá k umístění prvku přichyceném k oknu internetového prohlížeče. Původní umístění v toku dokumentu (kde by se nacházel, pokud by měl standardní pozici) se stane volné pro jiné HTML prvky.
Při použití position fixed je potřeba číselně definovat souřadnice nově určené pozice. To se určuje pomocí vyhrazených slov (left, right, top, bottom) a číslice hodnoty. Určujeme vždy dva směry souřadnic, např. top:0 a left:0. Tím je definováno umístění do horního levého rohu. Pokud jde o číslice. U nuly sice není nutné psát jednotky, avšak u ostatních číslic už to nutné je. Nejčastěji se píší pixely (např. top: 1px) a procenta vůči rozměrům okna prohlížeče (např. top: 10%). Je však možné používat např. i milimetry, centimetry a americké míry.
Jestliže prvek vyjmete z jeho přirozeného toku dokumentu pomocí position fixed, pak se vám může stát, že již nevyplní celou šířku okna internetového prohlížeče. V takové situaci je vhodné určit mu šířku např. pomocí width: 100%. Je třeba myslet také na to, že by se takový prvek mohl překrývat s jiným prvkem. Z toho důvodu je moudré určit pořadí viditelnosti takových prvků pomocí z-index, viz článek zde.
position: relative
Position relative se používá ve dvou případech.
Prvním případem je situace, kdy chcete prvek o kousek posunout ze svého původního umístění, ale aby to původní umístění zůstalo prázdné. Do původního umístění se totiž automaticky nepřesune žádný jiný HTML prvek, který je pod ním.
Druhým případ použití position relative je situace, kdy hodláte u vnořeného (rodičovského) HTML prvku použít position absolute a chcete, aby se od takto označeného elementu vypočítával rozměr. Více na toto téma další řádky:
position: absolute
Absolutní pozice změní umístění elementu, ale s tím, že původní místo, kde by se nacházel předtím, se uvolní a obsadí jej jiné prvky v toku dokumentu napsané pod ním. Díky tomu nevznikne žádný prázdný prostor. Má to však háček. Když už element (např. DIV) uvolnil své původní umístění, tak od čeho má počítat svou novou pozici? Počítá ji od nejbližšího prvku, jež má nastaveno position: relative. Pokud žádný takový není, vypočítá se od <body>.
position: sticky
Pokud je takto označený prvek umístěn uprostřed webové stránky, pak se chová jako statický, tj. defaultně. Změna nastane až v okamžiku, kdy by se při skrolování webové stránky měl dostat element mimo viditelnou oblast okna prohlížeče. V takovém případě se přepne do pozice position: fixed a tím zůstane viditelný v okně prohlížeče. Zní to úžasně, ale má to i určitou nevýhodu. Pozor! Tuto funkci nepodporuje Internet Explorer a Edge 15 a starší.
position: static
Jedná se o standardní defaultní chování a většinou ho není nutné nastavovat. Použit by mohl být proto, aby přebyl jiné CSS pravidlo.
Na které HTML prvky se nejčastěji používá
<div>, <h1> až <h6>, <form>, <iframe>
Kam dál
Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla Seznam CSS vlastností podle druhu Obecná pravidla CSS