Relativno pozicioniranje elemenata u CSS-u

Relativno pozicioniranje se postavlja sa vrednošću relative za svojstvo position. Ovakvo pozicioniranje omogućava pomeranje elemenata u odnosu na svoju trenutnu poziciju za zadatu veličinu. Pri tome će svi ostali elementi na stranici smatrati da je element tamo gde je i prvobitno bio. To jest, sa ovom vrstom pozicioniranja element ne ispada iz normalnog toka.

Pomeranja od trenutne pozicije se zadaju svojstvima top, right, bottom i left.

Primer

Za početek, hajde da napravimo dva bloka bez pozicioniranja:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Primer

Dodajmo sada prvom bloku relative. Od ovoga se za sada ništa neće promeniti, jer nismo naveli pomeranje bloka:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Primer

Hajde sada da pomerimo naš blok za 30px od vrha, zadavši mu svojstvo top. Pri tome će se svi ostali elementi ponašati kao da je naš blok ostao na mestu gde je prvobitno bio:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Primer

Hajde takođe da pomerimo naš blok za 40px sa leve strane, zadavši mu svojstvo left:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Primer

Negativne vrednosti svojstava top, right, bottom i left pomeraju u suprotnom smeru. Na primer, pozitivna vrednost top pomera na dole, a negativna - na gore.

Hajde da pomerimo naš drugi blok za 40px nagore, zadavši mu negativnu vrednost svojstva top:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Praktični zadaci

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}