CSS position absolute 親を基準に要素を配置する

positionのabsoluteは、親要素を基準として要素を配置します。

目次 positionのabsolute
親要素を基準として要素を配置(absolute)
親要素にposition:relativeが存在しないとき

positionのabsolute

書き方 position : 値
absolute
親要素を基準として要素を配置します。
親要素にはposition:relative(static以外の値であれば可)を指定します。
親要素がない場合は、ウィンドウ(htmlのbody)が基準になります。
positionプロパティの値として、他にstatic,relative,fixed,stickyがあります。
初期値 static
継承 なし
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/position

親要素を基準として要素を配置する(absolute)

absoluteは、親要素を基準として要素を配置します。

配置の方法は、absoluteを指定した要素から見て、親要素にposition:relative(static以外の値であれば可)を指定するとその親要素の辺が基準になります。

上記図のコードです。

<style>
  #parent {
    position: relative;
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #c4cece;
  }
  #box1 {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #e0ffff;
  }
</style>
<body>
  <p>positionのテスト</p>
  <div id="parent">
    親
    <div id="box1">box1</div>
  </div>
</body>

3行目は、親要素にあるposition:relateiveです。
10行目は、子要素にあるposition: absoluteです。
親要素の辺が基準になります。
11行目は、topで親要素から下に20pxずれます。
12行目は、leftで親要素から右に30pxずれます。

topとleftの代わりにbottomとrightの指定もできます。
マイナスの数値の指定もできます。

 

親要素にposition:relativeが存在しないとき

親要素にposition:relative(static以外の値)が存在しないときは、body(ウィンドウ)の左上が基準になります。

上記図のコードです。

<style>
  #parent {
    
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #c4cece;
  }
  #box1 {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #e0ffff;
  }
</style>
<body>
  <p>positionのテスト</p>
  <div id="parent">
    親
    <div id="box1">box1</div>
  </div>
</body>

3行目は、position:relativeを指定していません。

関連の記事

CSS 回り込みと解除のサンプル(floatとclear)
CSS positionのrelativeでボックスを配置する

△上に戻る