position 配置方法 コピペで使えるHTML+CSS

positionプロパティの概要

<div style="position: relative; background-color: #00aaff; width: 80%; height: 200px; margin: 10px;">
  <div style="position: absolute; top: 100px; background-color: #ffaaff; width: 40%; height: 100px;">display: block</div>
</div>

値

position : 配置方法

未指定の場合、初期値であるstaticが選択される

位置(距離)

top , right , bottom , left によって指定

型

static

staticにおいてはtopなどは反映されない

position : static; (未指定)

position : static;

position: static; top: 50px;

<div style="background-color: #00aaff; width: 80%; height: 200px; margin: 10px;">
  <p>position : static; (未指定)</p>
  <div style="position: static; background-color: #ffaaff; width: 40%; height: 100px; display: inline-block;">
  <p>position : static;</p>
  </div>
  <div style="position: static; top: 50px; background-color: #ff0000; width: 40%; height: 100px; display: inline-block;">
  <p>position : static;</p>
  </div>
</div>

relative

relativeは本来の位置(static配置した場合の位置)からの相対距離を指定します。

position : static; (未指定)

position: relative; top: 0px;

position: relative; top: 50px;

<div style="background-color: #00aaff; width: 80%; height: 200px; margin: 10px;">
  <p>position : static; (未指定)</p>
  <div style="position: relative; top: 0px; background-color: #ffaaff; width: 40%; height: 100px; display: inline-block;">
  <p>position: relative; top: 0px;</p>
  </div>
  <div style="position: relative; top: 50px; background-color: #ff0000; width: 40%; height: 100px; display: inline-block;">
  <p>position: relative; top: 50px;</p>
  </div>
</div>

absolute

absoluteは親からの相対距離で絶対配置される。全ての子要素は親要素からの距離(top,left,right,bottomで指定)によって配置する。display: inline-block;を指定しても意味はない。

position : relative;

position :absolute; top: 30px;

position :absolute; top: 50px; left: 210px; 

<div style="position: relative; background-color: #00aaff; width: 80%; height: 200px; margin: 10px;">
  <p>position : relative; /* 親をpositionでstatic以外を指定しないと、ブラウザの左上から50pxの位置に表示されてしまう。*/</p>
  <div style="position: absolute; top: 30px; background-color: #ffaaff; width: 40%; height: 100px;">
  <p>position :absolute; top: 50px;</p>
  </div>
  <div style="position: absolute; top: 50px; left: 210px; background-color: #ff0000; width: 40%; height: 100px;">
  <p>position :absolute; top: 50px; left: 210px; </p>
  </div>
</div>

並列組合せ

ピンクのabsoluteの四角は無視された状態で赤いrelativeの四角が配置される。

position : relative;

position :absolute; top: 30px;

position :relative; 

<div style="position: relative; background-color: #00aaff; width: 80%; height: 200px; margin: 10px;">
  <p>position : relative; /* 親をpositionでstatic以外を指定しないと、ブラウザの左上から50pxの位置に表示されてしまう。*/</p>
  <div style="position: absolute; top: 30px; background-color: #ffaaff; width: 40%; height: 100px;">
  <p>position :absolute; top: 50px;</p>
  </div>
  <div style="position: relative; top 50px; background-color: #ff0000; width: 40%; height: 100px;">
  <p>position :relative; </p>
  </div>
</div>