WebDev.wiki > CSS > CSS vlastnosti a hodnoty > position

position

Definice a použití

CSS vlastnost position definuje způsob počítání polohy prvku nebo elementu. Position rozlišujeme na statickou, relativní, fixní a absolutní.

CSS syntaxe

position: position;

Hodnoty vstupů	Popis	Hodnota
position	definuje způsob umístění prvku, neboli jak je počítáno jeho umístění	static, relative, fixed, absolute

Static - výchozí hodnota, prvek je umístěn normálně v rámci web či dokumentu
Relative - prvek bude posunut ze svého normálního umístění oproti hodnotě static
Fixed - prvek je umístěn absolutně vzhledem k oknu prohlížeče, používá se když má nějaký prvek být vidět neustále, i kdyby měl být odrolován
Absolute - prvek je vyjmut z toku webu či dokumentu

Ukázka:

CSS

/* Element je zobrazen v klasickém pořadí */
element_static {
    position: static;
}

/* Element je posunut o 10px od shora oproti klasickému pořadí */
element_relative {
    position: relative;
    top: 10px;
}

/* Element je umístěn v pravém spodním rohu i když budeme rolovat stránkou */
element_fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
}

/* Element je umístěn v pravém horním rohu, ale při rolování zůstává kde je */
element_absolute {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
}

Použité vlastnosti: position, top, bottom, right, width, height

Tip1 Pokud se dva elementy překrývají a oba nemají specifikovanou vlastnost z-index, tak bude element, který je umístěn jako poslední v HTML, tak právě ten uvedený jako poslední bude umístěn nahoru.

Podpora webových prohlížečů

Firefoxano

Internet Explorerano

Google Chromeano

Safariano

Operaano