みみぺんブログ

WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します

トップ > CSS初心者入門 > position プロパティまとめ！基本から応用まで徹底解説！(relative・absolute・fixed・static)【CSS初心者入門】

position プロパティまとめ！基本から応用まで徹底解説！(relative・absolute・fixed・static)【CSS初心者入門】

CSS初心者入門 かなきち

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

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

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

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

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

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

かなきち

これからの記事を読むと
positionの癖と実務で基本的な使い方が分かるよ！


こんな人に読んで欲しい

・コーディングをしていて、要素を自由に配置したいと思った方

・簡単にpositionの使い方を知りたい方

・positionの使い方がいまいち分からない方


positionとは

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


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

positionの基本的な使い方

See the Pen vYOZzyY 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(最上部)までの値で指定します。

z-indexは、position: relative・absolute・fixed いずれかと一緒

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


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

position応用編コード

縦中央寄せ

f:id:mimipen:20200303004700j:plain

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

縦横中央寄せ

f:id:mimipen:20200303004703j:plain

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

ヘッダー追従

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

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


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

まとめ

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

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

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

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

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


【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)