CSS-is vanema suhtes positsioneerimine

Kui elemendile on määratud relative ja selle järglasele - absolute, siis see järglane positsioneerub oma vanema suhtes, mitte brauseri akna suhtes.

Tavaliselt antakse sellisel juhul vanemale relative ilma nihketeta. Sel juhul vanemaga midagi ei juhtu, kuid kõik selle järglased positsioneeruvad nüüd tema suhtes.

Vaatame näidete varal.

Näide

Alustuseks teeme lihtsalt vanemaploki ja järglaseploki ilma positsioneerimiseta:

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

Результат:

Näide

Positsioneerime nüüd rohelise ploki absoluutselt. Kuna vanemale pole määratud relative, siis järglane positsioneerub brauseri akna suhtes:

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

Результат:

Näide

Määrame nüüd vanemale relative. Sel juhul positsioneerub järglane oma vanema suhtes:

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

Результат:

Praktilised ülesanded

Järgmistes ülesannetes on põhiplokk keskjoondatud kasutades margin väärtusega auto, ülejäänud plokid positsioneeruvad tema suhtes kasutades omadust position.