ブログblog

CSSのpositionについて

Writer： tokuyasu　更新日：2023/07/19


こんにちは。デジナーレ福岡オフィスの徳安です。
この記事では、CSSのpositionについて解説いたします。

 CSSのポジションとは？？

Positionは指定した要素の配置方法を決められるプロパティです。

positionの書き方

positionプロパティはCSSで以下のように書きます。
※〇〇にはセレクタが入ります。
値には次の4つのどれかを指定します。

positionの値
static 初期値。指定することはほとんどない。
relative 現在の位置を基準に相対的な位置を決める。
absolute 親要素を基準に絶対的な位置を決める。
fixed

画面の決まった位置に固定する

※使う際は注意が必要

 staticとは？

CSSで何も指定していない時の初期値。
要素の位置をtopやleftなどで指定しても調節できない。

 position: relative

position: relativeは現在の位置
（コンテンツが本来配置される予定だった位置）から
相対的に要素の位置を変更します。
 使用例 

このように、position:relative; とtop,leftの指定によって、
要素のもともといた位置から、
下に20px、右に50pxの位置に配置されます。
主な用途は、絶対配置をしたい要素の『基準に設定する場合』や、

通常コンテンツと同様に配置して、

ほかのコンテンツの上に『重ねて表示したい場合』など、

やや限定的な仕様となります。

position: absolute

position: absoluteは絶対位置を指定する値です。
今いる場所にかかわらず、設定された要素は
通常のコンテンツの配置の流れから完全に切り離されます。
position: absolute;を設定したら、
同時に表示させたい場所の座標を
【top, bottom, left, right】
を使って設定します。
場所の指定
top 要素が起点の上からどれだけ離れているか
bottom 要素が起点の下からどれだけ離れているか
left 要素が起点の左からどれだけ離れているか
right 要素の起点が右からどれだけ離れているか

 親要素にrelativeをつける

先ほど登場したrelativeを親要素（又は先祖要素）に配置すると、
その要素を基点として自由に配置することができるようになります。
今回は右上に配置したいので、right:0,top:0を設定します。
※absolute_parentのclassがついた要素は、今回基点にしたい要素です。
 使用例 
基点としたい要素は、絶対配置する要素の親または先祖要素で、
positionプロパティの値がstatic以外のブロックレベル要素である必要があります。
また、基準とする要素が複数存在した場合は、
絶対配置する要素に最も近い直近の先祖要素が基点となります。

 position: fixed;

fixedを指定すると画面の決まった位置に要素を固定させることができます。
メニューバーなど、ページをスクロールしても
場所を変更したくないときに使うと便利ですが、
ほかのスタイルとの兼ね合いで思わぬバグが発生するケースがあり、
若干不安定な要素となっているため、
本当にfixedを使う必要があるのかよく検討する必要がありそうです。
このように、positionレイアウトを使用することで、
本来の位置とは連動しない『自由な位置に要素を配置すること』ができます。
しかし、通常のコンテンツとは違い要素内のコンテンツの量が増えた場合でも、
要素が自動的に伸びたり、
後に続くコンテンツが下に下がるわけではないので、
うまく設計する必要があります。
うまく使い分けて、自由に要素を配置してみてください。
ここまで読み進めていただきありがとうございました。

tokuyasuの
他の記事を読む

tokuyasuの記事一覧
スタッフブログ一覧

関連タグ

CSS

デジナーレをもっと知るABOUT US