こんにちは、かなきち(@kanakichi0801)です。今回は、CSSプロパティpositionについて解説していきます！

要素を自由な位置に配置する方法がこの記事で分かります！

コーディングを始めたばかりの人でも、このプロパティの存在はなんとなくご存知なのではないでしょうか？

「CSS 自由な位置 配置」などで検索していると出てきますよね！ でも、試してみると上の方に要素が飛んで行ってしまったり…

そう、positionには、少々癖があります。癖と実務で使える基本的な使い方をこの記事では紹介していきます！

さっそく記事を読みたい方は スキップ を押してね！

positionとは

要素の位置を決められるプロパティです。要素を中央に配置したい場合や、タイトルを画像で装飾したい場合などに使用します。

初期値は、staticです。初期値は、一度設定したプロパティを解除するのに使用されることが多いです。

positionの基本的な使い方

See the Pen Untitled by かなきち (@kanakichi) on CodePen.

positionの使い方を一言で説明すると、position: relativeで要素を移動できる範囲を決め、自由に動かしたい要素にposition: absoluteを設定します。

次に位置を設定します。
左上、右上、左下、右下のどの位置からの距離を指定するかによって書き方が変わってきます。

書き方が以下になります。

.左上{
  top: 数値;
  left: 数値;
}
.右上{
  top: 数値;
  right: 数値;
}
.左下{
  bottom: 数値;
  left: 数値;
}
.右下{
  bottom: 数値;
  right: 数値;
}

z-indexで重ね順を変更する

positionを使用していると、重ねた要素を上に表示したいのに下に表示される場合があります。
そんな時は、z-indexを使用しましょう。

z-indexを使う場合は、position: relative・absolute・fixedいずれかと一緒に使いましょう。 ※staticは指定してもz-indexが効きません。

また、重ね順は-2147483647(最下部)〜2147483647(最上部)までの値で指定します。

.下{
  position: relative;
  z-index: 0;
}
.中{
  position: relative;
  z-index: 250;
}
.上{
  position: relative;
  z-index: 500;
}

「2147483647」まで指定できますが、基本的には指定しないですよね。職場のコーディングルールによって違いがあると思いますが、私の場合は、0〜500の間で10刻みを基本として指定するようにしています。最上部に表示したいものが500で、最下部に表示するのが0です。

position応用編コード

縦中央寄せ

.box__wrap{
  position: relative;
}
.box{
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

縦横中央寄せ

.box__wrap{
  position: relative;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

ヘッダー追従

スクロールしても同じ位置に固定して表示させたい場合は、position: fixedというプロパティと値が使えます。

header{
  position: fixed;
  top: 0;
  left: 0;
}

position: absoluteと違い、position: relativeで範囲を決める必要はありません。

まとめ

この記事の一番重要なポイントは、
position: relativeで要素を移動できる範囲を決め、自由に動かしたい要素にposition: absoluteを設定するという部分です。

positionのプロパティについて検索すると「位置指定要素」「相対位置指定要素」「絶対位置指定要素」「粘着位置指定要素」など、意味が理解しにくい説明が多く混乱してしまうのですが、実務で良く使うのは positionの基本的な使い方 で説明したものがほとんどです。

そう考えると、覚えることがそこまで多くないのがわかります。まずは基本を理解して、少しずつ応用編も使えるようになればコーディングの幅も広がりますね！

↓痒いところに手がとどく記事を日々更新中！

CSSで横並びにする方法 〜初心者はどれを選択すればいい？〜 Inline-bl…

widthとheightの使い方まとめと注意点について【CSS初心者入門】

display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】

この記事がいいなっと思ったら読者登録をお願いいたします！