CSSにおける絶対的親要素を基準とした位置指定

前のレッスンでは、親要素にrelativeを設定すると、その子孫要素は親要素を基準として絶対位置指定されることを確認しました。これは通常、親要素を通常フローから除外したくない場合によく行われます。

親要素にabsoluteが設定されている場合もあります。この場合、absoluteを持つ子孫要素も、ブラウザウィンドウではなく、その親要素を基準として位置指定されます:

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

Результат: