Lastnost position

Lastnost position določa način pozicioniranja elementov. Ta lastnost se najpogosteje uporablja skupaj z lastnostmi top, right, bottom, left, ki določajo odmike zgoraj, desno, spodaj, levo.

Sintaksa

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

Vrednosti za position

Vrednost	Opis
`absolute`	Absolutno pozicioniranje. Element se odstrani iz običajnega toka dokumenta in se pozicionira glede na najbližjega pozicioniranega prednika (če obstaja) ali glede na okno brskalnika.
`relative`	Relativno pozicioniranje. Element se premakne glede na svoj običajni položaj v toku dokumenta, vendar prostor, ki ga je zasedal, ostane rezerviran.
`fixed`	Fiksno pozicioniranje. Element se odstrani iz običajnega toka dokumenta in se pozicionira glede na okno brskalnika. Ostane na mestu pri drsenju strani.
`static`	Statično pozicioniranje. Vrednost pomeni odsotnost pozicioniranja in element se obnaša običajno.
`sticky`	Lepljivo pozicioniranje. Element se obnaša kot `relative`, dokler ne doseže določenega položaja pri drsenju, nato pa se prilepi na določeno mesto (kot `fixed`).

Privzeta vrednost: static.

Primer . Absolutno pozicioniranje

Postavimo element v zgornji levi kot zaslona z majhnimi odmiki:

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

Primer . Absolutno pozicioniranje

In zdaj postavimo element v zgornji desni kot zaslona z majhnimi odmiki:

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

Primer . Fiksno pozicioniranje

Pri fiksnem pozicioniranju bo element ostal na mestu pri drsenju:

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

Primer . Relativno pozicioniranje

Pri relativnem pozicioniranju se element premakne glede na svoj običajni položaj, vendar se drugi elementi obnašajo tako, kot da se element ne bi premaknil:

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

Primer . Gnezditev

Če ima starš lastnost position nastavljeno na vrednost relative, se bodo absolutno pozicionirani elementi pozicionirali glede na starš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;
}

Primer . Gnezditev

Če ima starš lastnost position nastavljeno na vrednost absolute, se bodo absolutno pozicionirani elementi pozicionirali glede na starš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;
}

Primer . Lepljivo pozicioniranje

Če je za element lastnost position nastavljena na vrednost sticky, se element obnaša kot relative, dokler ne doseže določenega položaja pri drsenju, nato pa se prilepi na mesto. Naredimo lepljivo glavo:

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

Primer . Brez pozicije

Če elementu določimo absolutno pozicioniranje brez navedbe pozicije, bo element ostal na mestu, kjer je bil brez pozicioniranja, vendar ga drugi elementi ne bodo več opazili:

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

Primer . Ena os

Pri absolutnem pozicioniranju lahko določimo pozicijo le na eni osi. Na primer, če določimo lastnost top, bo element navpično postavljen na želeno pozicijo, vodoravno pa bo ostal na mestu, kjer je bil:

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

Primer . Vse pozicije

Pri absolutnem pozicioniranju lahko določimo pozicije z vseh strani, ne da bi določili širino in višino. V tem primeru bo element postavljen na sredino starševskega bloka:

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

Glejte tudi

lastnost z-index,
ki določa prekrivanje elementov