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

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

Vrednosti za position

Podrazumevana vrednost: static.

Primer . Apsolutno pozicioniranje

Postavimo element u gornjem levom uglu ekrana sa malim odmacima:

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

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

css.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:

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

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

css.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:

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

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

css.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:

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

css.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:

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

css.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:

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

css.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:

html<h1>Glavni zaglavlje sajta</h1>

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

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

cssh1 {
  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:

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

css.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:

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

css.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:

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

css.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