Positionnement par rapport à un parent absolu en CSS

Dans la leçon précédente, nous avons vu que si l'on attribue relative à un parent, ses descendants avec un positionnement absolu se positionneront par rapport à lui. C'est une approche courante lorsque l'on ne souhaite pas que l'élément parent sorte du flux normal.

Il peut aussi arriver que le parent ait lui-même un absolute. Dans ce cas, les descendants avec absolute se positionneront également par rapport à ce parent, et non par rapport à la fenêtre du navigateur :

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

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

Результат: