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

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

通常、この場合、親要素にはオフセットなしで relativeが指定されます。これにより、親要素自体には 変化は起こりませんが、そのすべての子孫要素は この親要素を基準として位置指定されるようになります。

例を見てみましょう。

例

まず、位置指定なしで親ブロックと子ブロックを作成しましょう：

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

Результат:

例

次に、緑のブロックを絶対位置指定してみましょう。 親要素にrelativeが指定されていないため、 子孫要素はブラウザウィンドウを基準として位置指定されます：

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

Результат:

例

今度は親要素にrelativeを指定します。 この場合、子孫要素はその親要素を基準として位置指定されます：

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

Результат:

実践問題

次の問題では、メインブロックはmarginの値として autoを使用して中央に配置され、 他の要素はpositionプロパティを使用して それを基準として位置指定されます。