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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「position: relative」で何ができるのか？

「position: relative」を使うと、要素が元々あった位置から動かすことができます！

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

このピンクの要素に「position: relative」と指定して、動かしてみたいと思います！

この様に、「top」「left」といったプロパティを一緒に使うことで、要素を動かすことができます。

どのように「position: relative」を使うのか詳しく解説！

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

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

「position: relative」と「left」を一緒に使うと?

まず下記の様な要素を作りました。何も指定しなければ、この様になります。

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

.pink {
    position: relative;
    left: 10px;
  }

するとこうなります！

この様に、元々あった要素の位置の左端から、指定した長さだけ要素がずれます。

少し要素を動かしたい時に便利ですね。

「position: relative」と「top」を一緒に使うと?

では、次に「position: relative」と「top」を一緒に使うとどうなるか見ていきます。

まずは先ほどと同じように、この位置に要素があります。

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

.pink {
    position: relative;
    top: 10px;
  }

するとどうなるかと言うと、下記の通りです。

この様になります。

元々要素があった位置の上端から10px動きます。

「position: relative」と「bottom」を一緒に使うと?

では、次に「position: relative」と「top」を一緒に使うとどうなるか見ていきます。

まずは先ほどと同じように、この位置に要素があります。

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

.pink {
    position: relative;
    bottom: 10px;
  }

するとどうなるかと言うと、下記の通りです。

この様になります。

元々要素があった位置の下端から10px動きます。

「position: relative」と「right」を一緒に使うと?

では、次に「position: relative」と「top」を一緒に使うとどうなるか見ていきます。

まずは先ほどと同じように、この位置に要素があります。

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

.pink {
    position: relative;
    right: 10px;
  }

するとどうなるかと言うと、下記の通りです。

この様になります。

元々要素があった位置の右端から10px動きます。

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

「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: relative」を使うことで要素を動かしたとしても、そこでできたスペースは埋まりません。

イメージとしては、空白の要素が、元々あった位置にできて、実態の見える部分だけが移動するイメージですかね。

例を挙げますね。まずこちらを見て下さい。

この様に要素が並んでいたとします。

そこで、真ん中の要素に下記のスタイルを適用しました。

.pink {
    position: relative;
    left: 100px;
  }

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

こんな感じで、要素は動かせるけど、周りの要素は、動かした要素が元々あった位置にあるかのように配置されます。つまり影響を与えません。

まとめ

最後まで読んでくれてありがとうございました！

まとめとしては、下記の通りですかね。

「position: relative」を使うと要素を動かせる。

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

• top
• bottom
• left
• right

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

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

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

要素を動かしても他の要素には影響を与えない。

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

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

ではまた！