Relativno pozicioniranje elementov v CSS

Relativno pozicioniranje je določeno z vrednostjo relative za lastnost position. Takšno pozicioniranje omogoča premikanje elementov glede na njihov trenutni položaj za določeno vrednost. Pri tem bodo vsi drugi elementi na strani mislili, da je element tam, kjer je bil prvotno. To pomeni, da pri tej vrsti pozicioniranja element ne izpade iz običajnega toka.

Odmiki od trenutnega položaja so določeni z lastnostmi top, right, bottom in left.

Primer

Za začetek preprosto naredimo dva bloka brez 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

Zdaj pa prvemu bloku dodajmo relative. Za zdaj se še nič ne bo spremenilo, saj nismo navedli odmika 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

Zdaj pa premaknimo naš blok za 30px od zgoraj, tako da mu določimo lastnost top. Pri tem se bodo vsi drugi elementi obnašali, kot da je naš blok ostal na mestu, kjer je bil prvotno:

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

Prav tako premaknimo naš blok za 40px od leve, tako da mu določimo lastnost 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 lastnosti top, right, bottom in left premaknejo v nasprotni smeri. Na primer, pozitivna vrednost top premakne navzdol, negativna pa navzgor.

Premaknimo naš drugi blok za 40px navzgor, tako da mu določimo negativno vrednost lastnosti 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čne naloge

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