Vlastnost position

Vlastnost position určuje způsob pozicování prvků. Tato vlastnost se nejčastěji používá společně s vlastnostmi top, right, bottom, left, které nastavují odsazení shora, zprava, zdola, zleva.

Syntaxe

selektor {
	position: absolute | relative | fixed | static | sticky;
}

Hodnoty pro position

Hodnota	Popis
`absolute`	Absolutní pozicování. Prvek je odstraněn z normálního toku dokumentu a je pozicován vůči nejbližšímu pozicovanému předkovi (pokud existuje) nebo vůči oknu prohlížeče.
`relative`	Relativní pozicování. Prvek je posunut vůči své normální poloze v toku dokumentu, ale prostor, který zabíral, zůstává rezervován.
`fixed`	Fixní pozicování. Prvek je odstraněn z normálního toku dokumentu a je pozicován vůči oknu prohlížeče. Zůstává na místě při posouvání stránky.
`static`	Statické pozicování. Hodnota znamená absenci pozicování a prvek se chová normálně.
`sticky`	Lepivé pozicování. Prvek se chová jako `relative`, dokud nedosáhne zadané pozice při posouvání, poté se přilepí k určenému místu (jako `fixed`).

Výchozí hodnota: static.

Příklad . Absolutní pozicování

Umístíme prvek do horního levého rohu obrazovky s malými odsazením:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Příklad . Absolutní pozicování

A nyní umístíme prvek do horního pravého rohu obrazovky s malými odsazením:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Příklad . Fixní pozicování

Při fixním pozicování bude prvek zůstávat na místě při posouvání:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Příklad . Relativní pozicování

Při relativním pozicování je prvek posunut vůči své normální poloze, ale ostatní prvky se chovají tak, jako by se prvek neposunul:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Příklad . Vnoření

Pokud má rodič vlastnost position s hodnotou relative, pak absolutně pozicované prvky se budou pozicovat vůči rodiči:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Příklad . Vnoření

Pokud má rodič vlastnost position s hodnotou absolute, pak absolutně pozicované prvky se budou pozicovat vůči rodiči:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Příklad . Lepivé pozicování

Pokud má prvek vlastnost position s hodnotou sticky, pak se prvek chová jako relative, dokud nedosáhne zadané pozice při posouvání, poté se přilepí na místo. Vytvořme lepivou hlavičku:

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Příklad . Bez pozice

Pokud je prvku nastaveno absolutní pozicování bez určení pozice, pak prvek zůstane stát na místě, kde stál bez pozicování, ale ostatní prvky jej přestanou vnímat:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Příklad . Jedna osa

Při absolutním pozicování lze nastavit pozici pouze podél jedné osy. Například, pokud nastavíme vlastnost top, pak se prvek vertikálně umístí na požadovanou pozici, ale horizontálně zůstane stát, kde stál:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Příklad . Všechny pozice

Při absolutním pozicování lze nastavit pozice ze všech stran, bez nastavení šířky a výšky. V tomto případě se prvek umístí do středu nadřazeného bloku:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Viz také

vlastnost z-index,
která nastavuje vrstvení prvků