Vlastnosť position

Vlastnosť position určuje spôsob pozicionovania prvkov. Táto vlastnosť sa najčastejšie používa spolu s vlastnosťami top, right, bottom, left, ktoré nastavujú odsadenia zhora, sprava, zdola, zľava.

Syntax

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

Hodnoty pre position

Hodnota	Popis
`absolute`	Absolútne pozicionovanie. Prvok je odstránený z normálneho toku dokumentu a je pozicionovaný vzhľadom na najbližšieho pozicionovaného predka (ak existuje) alebo vzhľadom na okno prehliadača.
`relative`	Relatívne pozicionovanie. Prvok je posunutý vzhľadom na svoju normálnu polohu v toku dokumentu, ale priestor, ktorý zaberal, ostáva vyhradený.
`fixed`	Fixné pozicionovanie. Prvok je odstránený z normálneho toku dokumentu a je pozicionovaný vzhľadom na okno prehliadača. Zostáva na mieste pri posúvaní stránky.
`static`	Statické pozicionovanie. Hodnota znamená absenciu pozicionovania a prvok sa správa obvyklým spôsobom.
`sticky`	Lepivé pozicionovanie. Prvok sa správa ako `relative`, kým nedosiahne zadanú polohu pri posúvaní, potom sa prilepí k určenému miestu (ako `fixed`).

Predvolená hodnota: static.

Príklad . Absolútne pozicionovanie

Umiestnime prvok do ľavého horného rohu obrazovky s malými odsadeniami:

<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;
}

Príklad . Absolútne pozicionovanie

A teraz umiestnime prvok do pravého horného rohu obrazovky s malými odsadeniami:

<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;
}

Príklad . Fixné pozicionovanie

Pri fixnom pozicionovaní bude prvok zostávať na mieste pri posúvaní:

<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;
}

Príklad . Relatívne pozicionovanie

Pri relatívnom pozicionovaní sa prvok posúva vzhľadom na svoju normálnu polohu, ale ostatné prvky sa správajú tak, ako keby sa prvok 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;
}

Príklad . Vnorenie

Ak má rodič vlastnosť position s hodnotou relative, potom sa absolútne pozicionované prvky budú pozicionovať vzhľadom na rodiča:

<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;
}

Príklad . Vnorenie

Ak má rodič vlastnosť position s hodnotou absolute, potom sa absolútne pozicionované prvky budú pozicionovať vzhľadom na rodiča:

<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;
}

Príklad . Lepivé pozicionovanie

Ak má prvok vlastnosť position s hodnotou sticky, potom sa prvok správa ako relative, kým nedosiahne zadanú polohu pri posúvaní, potom sa prilepí na miesto. Vytvorme lepivú 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;
}

Príklad . Bez pozície

Ak sa prvku zadá absolútne pozicionovanie bez určenia pozície, potom prvok zostane stáť na mieste, kde stál bez pozicionovania, ale ostatné prvky ho prestanú vnímať:

<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;
}

Príklad . Jedna os

Pri absolútnom pozicionovaní je možné zadať pozíciu len pozdĺž jednej osi. Napríklad, ak zadáme vlastnosť top, potom sa zvisle prvok umiestni do požadovanej polohy, a vodorovne zostane stáť, tam, 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;
}

Príklad . Všetky pozície

Pri absolútnom pozicionovaní je možné zadať pozície zo všetkých strán, bez zadania šírky a výšky. V tomto prípade sa prvok umiestni do stredu nadradené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;
}

Pozri tiež

vlastnosť z-index,
ktorá určuje prekrývanie prvkov