HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用58. 要素の配置方法の指定のプロパティ(position)

      2017/07/11

positionプロパティとは

指定した要素の位置を相対位置と絶対位置で変更することができるプロパティです。
このプロパティを使うと、marginfloatを使わずに位置を自由に設定することも可能です。
座標位置は、left, right, top, bottomプロパティで指定します。

position: static;

相対位置(position: relative;)と絶対位置(position: absolute;)を使用しない設定。
主に、相対位置と絶対位置の指定の解除に利用します。

position: relative;

相対位置の指定。現在の位置からの相対な位置の指定を行います。
元の座標のwidth, height, margin, padding は保持され、表示位置だけをずらします。
left, right, top, bottomプロパティを使用しない場合は、元の位置のままです。
下記は、.box02の要素を元の位置から右に50px、下に50pxずらした状態です。
元の位置のwidth, height, margin, padding は保持されているので、前後の要素の位置は変わりません。

position- relative

position: absolute;

絶対位置の指定。レイアウトを基準にします。
親要素をさかのぼり、相対位置(position: relative;)または絶対位置(position: absolute;)の指定がある場合、その親要素を基準とします。
元の座標のwidth, height, margin, padding は保持されず、表示もずらします。
下記は、.wrapに相対位置の指定をして、その位置から.box02の要素を右に50px、下に50pxずらした状態です。
元の位置のwidth, height, margin, paddingは保持されないので、.box01の後に.box03が続きます。

position- absolute

position: fixed;

絶対位置の指定。ウインドウを基準にします。
absoluteと違い親要素に相対位置(position: relative;)、絶対位置(position: absolute;)が設定されていても基準にしません。
absoluteと同じく、元の座標のwidth, height, margin, padding は保持されません。
表示位置もずらします。
また、スクロールしてもその位置は保持される特徴があります。

下記は、.box02の要素をウインドウから右に50px、下に50pxずらした状態です。
スクロールしても位置が変わりません。

position- fixed

left, right, top, bottomプロパティ

指定した基準位置からの距離を指定するプロパティです。
relative, absolute, fixedの指定がある場合に使用できるプロパティ。
値に-(マイナス)指定をすると逆方向に移動します。
下記は、.box02の要素を.wrapを基準にし、右から50px、下から50pxずらした状態です。

right-bottom

z-indexプロパティ

相対位置(position: relative;)または絶対位置(position: absolute;)の指定をした要素の重ね順の指定です。値が大きいほうが上に重なります。
相対位置や絶対位置の指定がない要素より、下の位置に重ねることはできません。
z-indexの指定がない場合は、後の要素が上に重なります。
下記は、後の要素が下に重なるようにした例です。

z-index

positionプロパティで上下左右の中心にそろえる

positionプロパティを指定した要素には、margin: auto; の指定が無視されます。
そのため親要素の中心に移動する場合は、まずleft: 50%; top: 50%; を指定します。
更に要素の幅と高さの半分の値をmarginでマイナス指定で位置をずらします。

absoluteを使い中央揃え

まとめ

  • position: static; は相対位置、絶対位置を解除する場合に使用
  • position: relative; は現在の位置からの相対位置の指定
  • position: absolute; はレイアウトからの絶対位置の指定
  • position: fixed; はウインドウからの絶対位置の指定
  • left, right, top, bottomプロパティは移動する距離の指定
  • z-indexは、相対位置と絶対位置の重なり順の指定

 - HTML・CSS