ホーム(記事一覧)へ

CSS positionの基準点がどこか解説!

positionは基準点から任意にずらせるCSSです。

しかしそもそも基準点はどこなのか?

positionの基準点がどこか解説していきます。

positionの基本はこちら↓

positionの基準点の条件

positionのルールは少し複雑ですが、条件としては下記のとおりです。

条件1.やその上位の要素のうち最初にでてくるpositionをもつ要素

条件2.ただしposition:staticを除く

条件3.その要素のborderとpaddingの境界

条件4.指定するCSSにより基準が異なる

  • left→左が基準
  • top→上が基準
  • right→右が基準
  • bottom→下が基準

条件1.やその上位の要素のうち最初にでてくるpositionをもつ要素

position:absoluteなどで要素を動かす場合、その基準を指定する必要があります。

基本的には親にposition:relativeを指定することになるでしょう。

しかし、親にpositionを指定しなかった場合、その上にさらにさかのぼります。さかのぼり最初にpositionを持っていた要素が基準となります。

逆に言えば必ずしも直前の親を基準にする必要はないのです。

さかのぼってもpositionがない場合はbody(html)タグが基準となります。

条件2.ただしposition:staticを除く

position:staticはpositionの初期状態であり、何もない状態です。

staticの場合、動かすこともできなければ、基準になることもありません。positionを解除したいときに指定することがあります。

逆に言うとstatic以外の指定であれば、absoluteでもfixedでもstickyでも基準になります。

relativeだけが基準の指定ではないので注意です。

条件3.その要素のborderとpaddingの境界

親要素はborderの内側、子要素(動かす要素)はborderの外側が基準となります。

下記は黄色背景黒枠が基準となる親、白背景灰色枠が動かす子です。

topとleftを指定して動かす場合、基準は下記の赤い点となります。

absolute

条件4.指定するCSSにより基準が異なる

positionは必ずしも左上を基準にする必要はなく、下や右を基準にすることができます。

これらもCSSで指定します。

  • left→左が基準
  • top→上が基準
  • right→右が基準
  • bottom→下が基準

指定できる値

left・top・right・bottomには以下の値を指定できます。

  • 絶対指定…数字px(emなど)
  • 相対指定…数字%
  • マイナス指定… -数字
  • auto…指定の解除

絶対指定

pxやem等を指定できます。このときは横の指定も縦の指定も数値分同じだけ移動します。

left:15px

左端を基準に15px右へ移動する

absolute

top:15px

上端を基準に15px下へ移動する

absolute

right:15px

右端を基準に15px左へ移動する

absolute

bottom:15px

下端を基準に15px上へ移動する

absolute

相対指定

%で指定します。

left,rightの場合は(relativeなどを指定している)親のpaddingを含めた幅に対する割合となります。

top,bottomは(relativeなどを指定している)親のpaddingを含めた幅に対する割合となります。

left:15%

左端を基準に横幅の15%右へ移動する

absolute

top:15%

上端を基準に縦幅の15%下へ移動する

absolute

right:15%

右端を基準に横幅の15%左へ移動する

absolute

bottom:15%

下端を基準に縦幅の15%上へ移動する

absolute

マイナス指定

マイナス指定した場合、基準位置はそのまま移動する方向が逆になります。

left:-15px

左端を基準に15px左へ移動する

absolute

top:-15px

上端を基準に15px上へ移動する

absolute

right:-15px

右端を基準に15px右へ移動する

absolute

bottom:-15px

下端を基準に15px下へ移動する

absolute

auto

指定を解除するときに使います。

positionの基準点まとめ

条件1.やその上位の要素のうち最初にでてくるpositionをもつ要素

条件2.ただしposition:staticを除く

条件3.その要素のborderとpaddingの境界

条件4.指定するCSSにより基準が異なる

  • left→左が基準
  • top→上が基準
  • right→右が基準
  • bottom→下が基準

以上、CSS positionの基準点の解説でした。

関連記事