Svojstvo position

Svojstvo position zadaje način pozicioniranja elemenata. Ovo svojstvo se najčešće koristi zajedno sa svojstvima top, right, bottom, left, koja postavljaju odmake od vrha, desno, od dna, levo respektivno.

Sintaksa

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

Vrednosti za position

Vrednost	Opis
`absolute`	Apsolutno pozicioniranje. Element se uklanja iz normalnog toka dokumenta i pozicionira se u odnosu na najbližeg pozicioniranog pretka (ako postoji) ili u odnosu na prozor pregledača.
`relative`	Relativno pozicioniranje. Element se pomera u odnosu na svoju normalnu poziciju u toku dokumenta, ali prostor koji je on zauzimao ostaje rezervisan.
`fixed`	Fiksirano pozicioniranje. Element se uklanja iz normalnog toka dokumenta i pozicionira se u odnosu na prozor pregledača. Ostaje na mestu pri skrolovanju stranice.
`static`	Statično pozicioniranje. Vrednost označava odsustvo pozicioniranja i element se ponaša kao obično.
`sticky`	Lepljivo pozicioniranje. Element se ponaša kao `relative`, dok ne dostigne zadatu poziciju pri skrolovanju, nakon čega se lepi za naznačeno mesto (kao `fixed`).

Podrazumevana vrednost: static.

Primer . Apsolutno pozicioniranje

Postavimo element u gornjem levom uglu ekrana sa malim odmacima:

<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 . Apsolutno pozicioniranje

A sada postavimo element u gornjem desnom uglu ekrana sa malim odmacima:

<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 . Fiksirano pozicioniranje

Kod fiksiranog pozicioniranja element će ostati na mestu pri skrolovanju:

<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

Kod relativnog pozicioniranja element se pomera u odnosu na svoju normalnu poziciju, ali ostali elementi se ponašaju tako, kao da se element nije pomerio:

<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 . Ugnježdenost

Ako roditelj ima svojstvo position sa vrednošću relative, tada će apsolutno pozicionirani elementi biti pozicionirani u odnosu na roditelja:

<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 . Ugnježdenost

Ako roditelj ima svojstvo position sa vrednošću absolute, tada će apsolutno pozicionirani elementi biti pozicionirani u odnosu na roditelja:

<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

Ako element ima svojstvo position sa vrednošću sticky, tada se element ponaša kao relative, dok ne dostigne zadatu poziciju pri skrolovanju, nakon čega se lepi za mesto. Napravimo lepljivi header:

<h1>Glavni zaglavlje sajta</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 . Bez pozicije

Ako elementu zadamo apsolutno pozicioniranje bez navođenja pozicije, tada će element ostati stajati na mestu, gde je stajao bez pozicioniranja, ali ostali elementi prestaju da ga primećuju:

<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 . Jedna osa

Kod apsolutnog pozicioniranja možemo zadati poziciju samo po jednoj osi. Na primer, ako zadamo svojstvo top, tada će se po vertikali element postaviti na željenu poziciju, a po horizontali će ostati stajati, tamo, gde je i stajao:

<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 . Sve pozicije

Kod apsolutnog pozicioniranja možemo zadati pozicije sa svih strana, bez zadavanja širine i visine. U ovom slučaju element će se postaviti u centar roditeljskog 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;
}

Pogledajte takođe

svojstvo z-index,
koje zadaje slaganje elemenata jedan preko drugog