はじめに
CSSのpositionで思い通りに配置できないぞ！
relativeとabsoluteは何が違うの？
positionは初心者が躓きやすいプロパティの一つだよ。
今回は、そんな厄介なpositionの中でも特に初心者が躓きやすい
relativeとabsoluteの違いを解説するよ！
CSSのpositionプロパティは、各要素がどのように配置されるかを決めることができます。
大きく以下の①②の二つを指定することで各要素の設定を行います。
①値（static、relative、absolute、fixed、sticky等）
②位置（top、right、bottom、left）
使ってみると分かりますが、②の位置については、「起点となる位置からどこに配置するかを指定するか」を配置するものですので、理解しやすいと思います。
問題は①の値です。初心者はrelativeやabsoluteをうまく使いこなせないことが多いです。
本記事では、実際のサンプルコードを交えて、relativeとabsoluteの違いを解説していきます。
また、深い理解を促すために基本となるstaticについても合わせて解説します。
relativeとabsoluteの違い
結論から申し上げますと、relativeとabsoluteは要素を配置する際の「起点とする位置」が異なります。
relativeは「相対位置」と呼ばれ、その要素のもとのあった場所(static指定時)を起点とします。
absoluteは「絶対位置」と呼ばれ、windowや親要素を起点として位置を決定します。
ちょっと何を言っているかわからないですよね。。この先で具体的なソースコードを交えて解説していきますのでご安心ください。
また、これだけで既に理解できてしまった方は、この先を読む必要はありません。
static
本題のreative、absoluteに入る前の準備運動として、staticについて解説します。
relativeやabsolute（特にrelative）を理解するためには、staticについてしっかりと理解した方が効率が良いので少しだけお付き合いください。
概要
staticはpositionの初期値（デフォルト）です。
特にpositionのプロパティを指定しない場合、このstaticが適用されています。
特徴
- positionを指定しない場合、staticが適用されます。
- topやleft、bottomなど位置の指定をすることができません。
- 要素の重なり順を指定することができません。（z-indexプロパティを適用できない。）
具体例
以下のように親子関係を構成している要素を例にとって説明していきます。
黄緑色の親box内に赤色のchild-box1、オレンジ色のchild-box2が入っている状態です。
現在、以下のコードのようにchild-boxにposition:static;を適用しています。
また、top:50px;、left:50px;を適用していますが、そのCSSは反映されていないように見えます。これはstaticがtopやleftなどのプロパティで位置を指定することができないためです。もちろん、staticを解除してもtopやleftは反映されません。特にpositonを指定しない場合、staticとなっているのです。
htmlおよびcssは以下をご覧ください。
<body>
<div class="parent-box">
<div class="child-box child-box1">child-box1</div>
<div class="child-box child-box2">child-box2</div>
</div>
</body> .parent-box {
border: 2px green solid;
background-color: #ccffcc;
width: 250px;
height: 200px;
margin: 0 auto;
}
.child-box {
position: static;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
margin: 0 auto;
}
.child-box1 {
background-color: red;
}
.child-box2 {
background-color: orange;
}relative
以降、本題のrelative、absoluteについて解説していきます。サンプルコードを自分で動かすとより一層理解が深まるのでオススメです。
概要
relativeは要素が通常配置される場所（staticの位置）を起点とします。
通常配置(staticの位置)される箇所を起点として位置を指定したい場合に使用します。
特徴
- topやleft、bottomなどを指定することで、思い通りの位置に配置できます。
- 要素の重なり順を指定することができます。（z-indexプロパティを適用できる。）
- absolute（次で解説）の基準要素をなります。
具体例
以下のように親子関係を構成している要素を例にとって説明していきます。
黄緑色の親box内に赤色のchild-box1、オレンジ色のchild-box2が入っている状態です。
現在、以下のコードのようにchild-boxにposition:rerative;を適用しています。
た、top:50px;、left:50px;を適用しており、通常配置される場所（static時）を起点としていることがわかります。
htmlおよびcssは以下をご覧ください。
<body>
<div class="parent-box">
<div class="child-box child-box1">child-box1</div>
<div class="child-box child-box2">child-box2</div>
</div>
</body> .parent-box {
border: 2px green solid;
background-color: #ccffcc;
width: 250px;
height: 200px;
margin: 0 auto;
}
.child-box {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
margin: 0 auto;
}
.child-box1 {
background-color: red;
}
.child-box2 {
background-color: orange;
}absolute
概要
absoluteはrelative（正確にはstatic以外）が指定されている親要素を起点とします。
要素自身ではなく、親要素やwindow全体を起点として位置を指定したいときに使用します。起点の位置がrerativeとは異なりますが、好きな位置に配置できることは同様です。
特徴
- topやleft、bottomなどを指定することで、思い通りの位置に配置できます。
- 要素の重なり順を指定することができます。（z-indexプロパティを適用できる。）
- 親要素のrelative（正確にはstatic以外）を起点とします。
具体例
以下のように親子関係を構成している要素を例にとって説明していきます。
黄緑色の親box内に赤色のchild-box1、オレンジ色のchild-box2が入っている状態です。
現在、以下のコードのようにchild-boxにposition:absolute;を適用しておりchild-bpx1にはtop:50px;、left:50px;を適用しています。child-bpx2にはtop:150px;、left:50px;を適用しています。
また、parent-boxにposition:rerative;を適用しています。
このことから、absoluteを指定したプロパティは、親要素のうちrelativeを指定している要素の左上を起点としていることが分かります。
<body>
<div class="parent-box">
<div class="child-box child-box1">child-box1</div>
<div class="child-box child-box2">child-box2</div>
</div>
</body> .parent-box {
position: relative;
border: 2px green solid;
background-color: #ccffcc;
width: 250px;
height: 200px;
margin: 0 auto;
}
.child-box {
position: absolute;
left: 50px;
width: 100px;
height: 100px;
margin: 0 auto;
}
.child-box1 {
top: 50px;
background-color: red;
}
.child-box2 {
top: 150px;
background-color: orange;
}ここで、parent-boxのposition:rerative;を外してみるとどうなるでしょう？
この場合は、親要素のrelativeを探して行き、<html>タグまで結局見つからないため、ウィンドウの左上を基準点とします。
終わりに
本記事はここまでとなります。
ご覧いただきありがとうございました。ご指摘等がございましたら頂けますと嬉しいです。
引き続き、プログラミングについて定期的に発信していきますのでよろしくお願いします！
また、もしよろしければtwitterもフォローしていただけると嬉しいです！🐢
コメント