要素の位置(position)をCSSで指定する方法!relative?absolute?どっち?

あらすじ

html要素の位置を自由に決めることができるpositionプロパティとはご存知でしょうか。
 
このpositionプロパティではHTMLの要素を絶対位置(absolute)や相対位置(relative)といった方法で指定することができます。

画像を複数枚重ねたい場合や、文字位置などを指定する際に非常に有効なプロパティです。

ぜひこの記事を読んで使い方を学んでおきましょう。

そもそもCSSが分からない！といった方はこちらの記事をご覧くださいfa-arrow-circle-down

CSS3とは？初心者必見！プロパティ、セレクタ、バージョン、文法など

2019.8.18

あらすじ CSSとはどのような言語で、どのような働きをするものなのでしょうか。 今回はそんな疑問にお答えするべく、CSSという言語について詳しく解説していきたいと思います。 具体的には CSSとは CSSの文法 CSSのバージョン CSSプロパティの代表例 といった項目に分けてご紹介していきます。...

位置の指定方法

positionプロパティでは要素の位置の配置方法を指定しますが、実際の位置を指定する際に使う値は

の4種類です。

これらの値を使用して、細い配置場所を指定します。

もともとの位置を指定するstatic

記載方法position: static;

デフォルトの値がこのstaticとなります。

staticとは日本語にすると「静的な」や「静止した」といった意味を持っています。

このpositionプロパティで利用する際もまさにその意味通りで、位置を指定する、top(上)、bottom(下)、left(左)、right(右)の影響を受けることなく、静止した位置に要素を配置したい場合に使用します。

以下の例では、h1タグがtop(上)とleft(左)の影響を受けていないのがお分かりいただけたかと思います。

See the Pen
BaBVYor by 萩原 英 (@suguru1989)
on CodePen.

相対的な位置を指定するrelative

記載方法position: relative;

relativeは相対位置を表す際に利用する値です。

本来、デフォルトで位置している場所から相対的な位置に配置することができます。

どうゆうことかというと、例えばデフォルトでの位置が画面の左上だとし、top(上)を50px、left(左)を50pxと指定したとすると、relativeで指定した要素はtop(上)から50px下のleft(左)から50px離れたところに位置することになります。

See the Pen
gOYKvpG by 萩原 英 (@suguru1989)
on CodePen.

絶対的な位置を指定するabsolute

記載方法position: absolute;

absoluteとはrelativeの反対語で、日本では「絶対的な」と訳すことができます。

このabsoluteはどのような方法で使用するかというと、親要素を基準の位置と定め、その中にある子要素の配置を決める際に使用します。

以下の例だと、divタグが親要素となり、h1タグが子要素となります。

See the Pen
QWLxQWV by 萩原 英 (@suguru1989)
on CodePen.

位置を固定するfixed

記載方法position: fixed;

fixed要素はいくらスクロールしようが位置が変わらないように配置したい場合に使用する値です。

親要素に依存することなく、位置を固定させることができるのが特徴です。

以下の例では、いくらスクロールしても位置に変わりがないのがおわかりいただけるかと思います。

See the Pen
vYBrewr by 萩原 英 (@suguru1989)
on CodePen.

位置を固定するsticky

記載方法position: sticky;

sticky要素とは、スクロールしても位置が固定させることができるもので、ほぼほぼfixed要素と同じ使い方ができます。

sticky要素とfixed要素の大きな違いといえば、fixed要素は親要素に依存することなく位置を固定できますが、sticky要素は親要素内でしか効果を発揮できないところです。

See the Pen
KKPeZOG by 萩原 英 (@suguru1989)
on CodePen.

まとめ

いかがだったでしょうか。

staticはデフォルトの値で、位置の指定ができません。

relativeは相対的な位置を指定し、absoluteは親要素に影響される絶対的な位置を指定します。

そしてfixedとstickyの違いは、sticky要素は親要素に依存するということです。