Pozicioniranje glede na starša v CSS

Če je elementu določen relative, njegovemu potomcu pa absolute, se bo ta potomec pozicioniral glede na svojega starša in ne glede na okno brskalnika.

V takšnem primeru staršu običajno določimo relative brez premikov. V tem primeru se s tem staršem nič ne zgodi, vendar se bodo vsi njegovi potomci zdaj pozicionirali glede nanj.

Poglejmo si primere.

Primer

Za začetek naredimo blok-starša in blok-potomca brez pozicioniranja:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Primer

Zdaj absolutno pozicionirajmo zeleni blok. Ker staršu ni določen relative, se bo potomec pozicioniral glede na okno brskalnika:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Primer

Zdaj določimo staršu relative. V tem primeru se bo potomec pozicioniral glede na svojega starša:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Praktične naloge

V naslednjih nalogah je glavni blok centriran s pomočjo margin z vrednostjo auto, ostali pa so pozicionirani glede nanj s pomočjo lastnosti position.