【CSS】「position: absolute」について簡単に解説。【分かりやすい】

CSSの「position: absolute」について簡単に教えてほしい。

この記事はこのような方へ向けて書いています！

それでは、サクッとこの記事で「position: absolute」の使い方を学習しちゃって下さい！

では、内容へ入っていきますね。

まず「position」プロパティについて少し解説。

まずは少し「position」プロパティ自体についての解説をします。

「position」プロパティで何ができるのか？というと、要素の細かい配置の設定をすることができます。

とても便利なプロパティなので、よく使いますね！

また、下記の動画内で「position」プロパティについてより詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをご視聴下さい！

「position」プロパティに設定できる値は？

「position」プロパティには下記の5つの値が設定できます。

これらの５つの値が設定できますね！

「position」プロパティの初期値は？

「position」プロパティの初期値は「static」です。

「position」プロパティって継承するの？

「position」プロパティは、継承はしません。

他の4つのプロパティと一緒に使う。

「position」プロパティは、下記の４つのプロパティのうち、１つか２つと一緒に使うんですよね。

「position」プロパティは、これらのプロパティと一緒に使うのです！

この辺でまでで、「position」プロパティのことがざっくりと分かったかなと思うので、これからは「position: absolute」の使い方の解説に入っていきますね！

「position: absolute」で何ができるの？

「position: absolute」を使うと、要素を浮かせて、別の場所に自由に配置することができます。

このような要素を作りました。

外側の紫色の枠線は、ウィンドウだと思って下さい。

では、このピンクの要素に「position: absolute」を使ってみたいと思います。

この様に、要素を浮かせて移動させることが可能です。

「position: absolute」は「top」「left」と一緒に使う。

「position: absolute」を使って浮かせた要素は、他のCSSプロパティを使うことで、配置する位置を決定します。

これらの４つのプロパティの、１つか２つと一緒に使うことで、要素を配置します。

「position: absolute」はweb制作でよく使う便利なプロパティですね。

具体的にはどのように「position: absolute」を使うのか？

では、具体的にどのような仕組みで要素を動かすのか、書いていこうと思います。

仕組み自体は簡単ですのでサクッといきましょう！

「position: absolute」と「top」「left」を使う。

まず、下のように要素を配置しました。さっきのと同じく、外側の紫の枠線は、ウィンドウだと思って下さい。

この様に要素を配置しました。

緑の枠線がついたコンテナーの様な要素の中に、ピンクの要素を配置しています。

下記の様なコードを書きました。ピンクの要素を浮かせて動かしてみようと思います。

.pink {
    position: absolute;
    top: 0;
    left: 0;
  }

すると、この様になります。

「position: absolute」と一緒に「top: 0」と「left: 0」としてみると、要素は浮いて、基準の位置に配置されます。

今回は、ウィンドウの上端と、ウィンドウの左端が基準となっています。

下記の様なコードを書いてみます。

.pink {
    position: absolute;
    top: 30px;
    left: 20px;
  }

すると下の様になります。

この様に、「top」プロパティを使うと、基準の位置から、要素を上下方向にどれだけ動かすかを指定できます。

そして、「left」プロパティを使うと、基準の位置から、要素を左右方向にどれだけ動かすかを設定することができます。

また、「基準に位置」は、特に何も設定しなければ、ウィンドウの端になることに注意して下さいね。

「position: absolute」と「bottom」「right」を使う。

また先ほどの様に要素を配置しました。

ここで、下記の様なコードを書いてみます。

.pink {
    position: absolute;
    bottom: 0;
    right: 0;
  }

すると下の画像の様になります。

この様になります。

ここからも分かるように、「bottom」プロパティを使うと、ウィンドウの下端が基準になります。

そして、「right」プロパティを使うと、ウィンドウの右端が基準になります。

それでは「bottom」と「right」にも、「０」以外の値を入れてみます。

.pink {
    position: absolute;
    bottom: 30px;
    right: 20px;
  }

この様なコードを書きました。

これでどうなるかと言うと、下の様になります。

この様に、基準の位置から指定した分だけ動いた位置に要素は配置されます。

「ーの値」も設定できる。

「top」「left」「bottom」「right」には「ー(マイナス)の値」も設定できます。

どうなるかと言うと、「 + (プラス) の値」を設定した時とは、反対の方向へ要素が動きます。

ここまでで、基本的な「position: relative」の使い方が伝わったと思います！なかなか便利そうですよね～。

「top」と「bottom」が両方設定されていた場合はどちらが優先されるの？

「top」と「bottom」という２つのプロパティがどちらも設定されていた場合は、それらが対抗しまうので、どうなるの？

結論、「top」が優先されます。

「bottom」が効かない！とならないようにです！

「left」と「right」が両方設定されていた場合はどちらが優先されるの？

結論、日本語などでは基本的に「left」が優先されます。

詳しくは、「direction」プロパティの値が、「ltr」の場合は、「left」が優先されます。

逆に、「direction」プロパティの値が、「rtl」の場合は、「right」が優先されます。

日本語や英語などは、テキストは左から右に流れていくので、意識しなくても「left」が優先されますね。

ペルシャ語、アラビア語、ヘブライ語などの、書字方向が右から左の言語などでは、「direction」プロパティの値に「rtl」が使われると思うので、「right」が優先されます。

「left」が優先される！と覚えておけば基本的に問題はなさそうだね！

「position: absolute」を使うと、要素が浮く。

この様に、要素を配置しました。

そこで、ピンクの要素に「position: absolute」を使ってみます。

外側の紫の枠線は、ウィンドウだと思って下さい。

すると下の様になります。

この様に、要素は浮くので、他の要素が詰めて配置されます。

この部分は、「position: relative」と違う点だね！

この様に、「position: absolute」を使うと、「他の要素の配置に影響を与える」ことに留意して下さいね。

要素の配置に使われる基準の変更方法！

• top
• left
• bottom
• right

これらのCSSのプロパティを使うと、特に設定してなければ、基準がウィンドウとなっていたと思います。

ですが、例えば、親要素に「position: static」以外の値が設定されていると、その要素の上端や左端が基準となります。

「static」については、下記の記事で解説しています。

上の様に、茶色い枠線の要素も追加してみました。

そのさらに外側の紫の枠線は、ウィンドウだと思って下さい。

これに対して、下記のようなコードを書いてみます。

.brown {
    position: relative;
  }
  .pink {
    position: absolute;
    top: 0;
    left: 0;
  }

外側の茶色い境界線がついた要素に対して、「position: relative」と指定しました。

そして、ピンクの要素に「position: absolute」を指定してみました。

これでどうなるかと言うと、下の様になります。

この様に、「position: ralative」と指定した要素に基準が変更されます。

祖先要素で「static」以外の一番近い要素が基準になる。

祖先要素で「static」以外の要素があれば、要素の配置に使う基準がウィンドウじゃなくなります。

そこで、基準が変更されるのですが、「position: absolute」と指定された要素から、一つずつ祖先要素に遡っていって、一番初めに出会う「static」以外の要素に基準が移ります。

一番近い祖先要素ですね。

このようなルールもあるので、覚えておいてください。

ウィンドウが基準だと使いにくいので、「基準の変更」はよく使います！

まとめ。

「position: absolute」を使うことで、要素を浮かばせて、自由に配置できる。

下記の４つのプロパティの、１つか２つと一緒に使うことで要素を配置する。

• top
• bottom
• left
• right

ー（マイナス）の値も設定できる。その場合は、通常と逆方向に動く。

「top」と「bottom」だと、「top」が優先される。

「left」と「right」だと、基本的に「left」が優先される。厳密には、これは「direction」プロパティによって変わる。

「position: absolute」は他の要素に影響を与える。

特に指定がない場合は、基準はウィンドウとなる。

「position: absolute」と指定した要素の祖先要素に「position: static」以外の要素があれば、その要素が基準となる。

また、祖先要素で「static」以外の、「position: absolute」と指定した要素から１番近い要素が基準になる。

また、下の動画で「position」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは、こんな感じでこの記事を終わります！

ではまた！