🌊

【CSS】positionの使い方

2024/03/03に公開

MDN (position)

position は CSS のプロパティで、文書内で要素がどのように配置されるかを設定します。 [top](https://developer.mozilla.org/ja/docs/Web/CSS/top), [right](https://developer.mozilla.org/ja/docs/Web/CSS/right), [bottom](https://developer.mozilla.org/ja/docs/Web/CSS/bottom), [left](https://developer.mozilla.org/ja/docs/Web/CSS/left) の各プロパティが、配置された要素の最終的な位置を決めます。

positionプロパティは、要素の配置を設定するものということは分かりますが、

どんなときに使用するべきか

が想像しにくかったので、それぞれの値の使い方をまとめてみます。

それぞれの値の使い方

positionプロパティ自体は、配置方法の設定であって、位置指定は関係していない。

そのため、top・bottom・left・right プロパティとセットで使うのがセオリー

加えて、z-indexで重なりの順番を設定することも多い。

static

デフォルト値である
top・bottom・left・right プロパティ、z-indexプロパティの使用はできない

relative

要素の基準：staticの場合に表示される位置
要素は文書の通常のフローに従う (absoluteで解説)

上記の場合、赤線の左上を基準に移動しています。

このrelativeはstaticの場合に表示される位置を基準にしているため、他の要素の影響によって基準位置が変わります。

absolute

基準：
- 親・祖先要素がstaticの場合：ページ全体が基準
- 親・祖先要素がstatic以外の場合：一番近くの親または祖先要素が基準
要素は文書の通常のフローから除外される

下のコードでは、水色の部分が親要素でrelativeの部分です。

「通常のフロー」とは、ウェブサイトにHTML要素がレイアウトされる時の基本的な流れのことです。

この流れから除外されると、他の要素の影響を受けません。(ただし、基準にしている要素の影響は受ける)。そのため、画像を重ねて表現するときなどに有効です。

fixed

基準：ブラウザの表示領域が基準
要素は文書の通常のフローから除外される

この値もフローから除外されるため、他の要素の影響を受けません。

また、ブラウザの表示領域を基準に位置を合わせているため、スクロールしても固定された位置に表示されます。

sticky

基準：
- スクロール時：祖先要素および包含ブロック
- スクロール以外：親要素
要素は文書の通常のフローに従う

上記のようにスクロールに応じて、一定の範囲内で追従させることが出来ます。

仕組みとしては、stickyでは、stickyアイテムとstickyコンテナと呼ばれる２つに分類されます。

stickyアイテム：stickyを指定した要素
stickyコンテナ：stickyを指定した要素の親

stickyアイテムはstickyコンテナの範囲内から抜け出すことが出来ません。

また、以下の場合、stickyが機能しません。

先祖要素にoverflowが指定されていると動かない (position: stickyの面白い使い方と使用時の注意点)

親要素にoverflow: hiddenを指定してfloatを解除している場合、position: stickyが使えません。これは、直近の親要素だけじゃなくて、先祖要素のいずれかにoverflowが指定されているとダメみたいです。

floatを使ったグリッドシステムではposition: stickyを使えない可能性が高いので注意が必要です。

overflow: hidden、overflow: autoだとstickyが効かない

overflow: scrollで高さの指定がないとstickyが効かない

overflow: scrollで高さの指定があると、そのブロック内でstickyが効く。この場合、先祖要素にoverflow: hiddenが指定されていても関係ありません

overflow: visibleだとstickyが効く

positionの使い道

positionは色々な表現が出来そうなので、以下は参考程度に読んで頂ければと思います。

relativeとabsoluteをセットで使う

relativeの使い道は

absoluteの基準位置に指定する場合
z-indexで重なりの順番を変更したい場合

の２つです。

absoluteの使い道は

要素内の特定の場所に要素を重ねたい場合

だと考えています。

例えば、文章と画像で表現されている場所にアクセント画像を入れる場合です。

また、absoluteでレスポンシブ対応も行えます。

ただし、「%」や「vw」を使用するため、計算する必要があります。

fixedとstickyの使い分け

この２つの値は、「画面に追従する」という点で似ていますが、

要素の大きさが他の要素に影響を与えるかどうか

が違います。

要素の大きさが他の要素に影響しないfixedの使い道は

どの要素に重ねっても表示させたい場合

に使用します。

例えば、

上部に戻るボタン
SNSなどでよくある右下の投稿ボタン
広告

で使用できそうです。

要素の大きさが他の要素に影響するstickyの使い道は

基本的にレイアウトを保つが、スクロール時には追従して欲しい場合