Positionering relativt till förälder i CSS

Om ett element har relative, och dess avkomling - absolute, så kommer denna avkomling att positioneras relativt sin förälder, och inte relativt webbläsarens fönster.

Som regel sätts i så fall relative på föräldern utan förskjutningar. I detta fall händer inget med denna förälder, men alla dess avkomlingar kommer nu att positioneras relativt den.

Låt oss titta på exempel.

Exempel

Låt oss först skapa ett förälderblock och ett avkomlingblock utan positionering:

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

Результат:

Exempel

Låt oss nu absolutpositionera det gröna blocket. Eftersom föräldern inte har fått relative, kommer avkomlingen att positioneras relativt webbläsarens fönster:

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

Результат:

Exempel

Låt oss nu sätta relative på föräldern. I detta fall kommer avkomlingen att positioneras relativt sin förälder:

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

Результат:

Praktiska uppgifter

I följande uppgifter står huvudblocket i mitten med hjälp av margin med värdet auto, medan de andra positioneras relativt det med hjälp av egenskapen position.