ZeroPlus Media > L_HTML/CSS > Step2 > CSSのpositionプロパティで要素を配置しよう

CSSのpositionプロパティで要素を配置しよう

2022/07/14

2022/08/24

今回は、positionプロパティの使い方について解説していきます。

webサイトを制作する際に、positionプロパティをきちんと使いこなせると制作がスムーズに進みます。

この記事で身につく内容

positionプロパティとは何か　　　　　　　　　　　　　
positionプロパティの使い方
positionプロパティの種類
要素を自由な位置に配置する方法

positionプロパティとは

positionプロパティは、要素の「位置」を指定する際に使用するCSSプロパティです。

要素を自由に配置したい

要素の重なり順を変えたい

ヘッダーを固定して表示したい

など、web制作におけるちょっとした要素の配置を楽に行うことができます。

positionの種類

次に、positionプロパティで指定できる値について、それぞれ紹介します。
基本的に以下の形で、さまざまな値を取ることがあります。

.class {
  position: 値;
}

static

staticは初期値です。要素に対しpositionプロパティが何も指定されていない場合はstaticの状態になります。

特徴

位置を動かすことはできない
距離指定プロパティで位置を調整することはできない
z-indexで重なり順を指定することはできない

relative

要素を自由に配置したい時、基準としたい要素に指定することが多いです。
特に後述するabsoluteとセットで使用します。

親要素にrelativeを指定して基準にし、子要素にabsoluteを指定することで、子要素を移動させることができます。

特徴

どのくらい動かすか、という距離を指定するプロパティを設定しなければ、staticと同様変化は起きない
距離指定のプロパティを設定すれば、位置調整が可能
ただし単体で指定して位置を動かす使い方はあまりせず、absoluteとセットで使用することが多い。
動く時は「現在の位置」が基準。要素自身を動かしたとしても、基準の場所には要素分の高さが残る
z-indexで重なり順を指定する事が可能

absolute

親要素を基準に絶対的な位置を決めます。親要素をrelative(またはfixed)にすることで、親要素を基準に、距離指定のプロパティで設定した位置に表示されます。

特徴

absoluteを指定した要素は、元々の配置されていた場所からはその要素の高さが無くなる（一段上に浮く）
relativeとセットで使用する
自分の親要素を基準とし、要素の移動が可能
z-indexで重なり順を指定する事が可能

fixed

画面の決まった位置に要素を固定します。webサイトをスクロールしても、要素が固定されるので、追従した状態で表示されます。

指定方法・特徴はabsoluteとほぼ同じと考えてOKです。

基準がwindow全体になるので、注意が必要です。画面左上からどれだけの距離に配置されるかを考えて位置を指定しましょう。

sticky

stickyは、日本語訳で粘着という意味があります。

その名の通り、スクロールした際に要素をシールのように粘着させ、固定表示することができます。

使用する際は、親要素と子要素を準備し、子要素に対してstickyを記述します。

このとき、親要素をsticky containerと呼び、子要素はsticky itemと呼びます。

親要素を用意することで、追従する範囲を指定することができます。

特徴

親要素を用意することで固定する範囲を指定できる
追従が開始されるとfixedのように要素が固定される

positionプロパティの使い方

次に、positionを使った要素の配置の方法を紹介します。
上記で紹介したうち、最もよく使用されるrelativeとabsoluteの使用を見ていきましょう。

positionプロパティを用いて、要素を配置するときは以下のように考えます。

動かしたい要素の基準を決める
動かしたい要素を決める
基準からどれだけ動かしたいか決める
要素の重なり順を決める

以上の手順を覚えるだけでpositionプロパティがぐっと使いやすくなります。

① 動かしたい要素の基準を決める

.relative {
  position: relative;
}

position: relative;を用いて動かしたい要素の基準を決めることができます。

② 動かしたい要素を決める

.absolute {
  position: absolute;
}

自由に配置したい要素に対して、position: absolute;を指定することで、基準(relativeをつけた要素)を元に、要素を自由に配置することができます。

次に、どれだけ動かしたいか距離を指定してあげましょう。

基準からどれだけ動かしたいか決める

.absolute {
  position: absolute;
  top: 50%;
  left: 100px;
}

position: absolute;を指定した要素に対して、基準からどれだけ動かすのかを記述しましょう。

基本的に何も設定していないと、基準となる要素の左上に位置します。
動く要素も、左上を起点に動きます。

距離を記述するプロパティ

以下の4つを使用して、距離を決めます。

topプロパティ
bottomプロパティ
leftプロパティ
rightプロパティ

値には「数値＋単位」を与えます。負の値を指定することも可能です。

すべてを必ず指定しなければならないわけではありません。要素を置きたい位置を調整するために必要なプロパティのみを指定します。左上が起点になるので、「top」と「left」を最初に使用することが多いです。
ほとんどの場合「top」と「bottom」、「left」と「right」を同時に指定することはありません。

上記の手順で、要素を自由に配置することが可能ですが、要素の重なり順を操作したい場合には以下の手順も行いましょう。

要素の重なり順を決める

position: absolute;を持つ要素が２つ以上ある場合には、重なり順の指定を行いましょう。

.absolute01 {
  position: absolute;
  top: 0;
  left: 100px;
  z-index: -100;
}

.absolute02 {
  position: absolute;
  top: 30%;
  left: 300px;
  z-index: 100;
}

z-indexプロパティを指定することで、要素の重なり順を指定することができます。奥行きを表すZ軸をイメージすると理解がしやすいです。

z-indexプロパティの値が大きいものほど前面に配置されます。反対に、値が小さいものは背面に配置されます。

注意点として、positionプロパティの値がstatic (初期値)の場合にはz-indexは指定できません。重なり順を指定したい場合には、positionにrelative・absolute・fixedのどれかを指定してあげましょう。