CSS position:absoluteやfixedの基準点がどこか解説！

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

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

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

positionの基本はこちら↓

positionの基準点の条件

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

条件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を指定して動かす場合、基準は下記の赤い点となります。

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

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

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

指定できる値

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

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

絶対指定

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

相対指定

%で指定します。

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

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

マイナス指定

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

auto

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

positionの基準点まとめ

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

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

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

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

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

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