【CSS】positionとは?relativeとabsoluteの違い。初心者向け

positionとは

要素を配置する時に使うプロパティで、要素を思い通り位置に配置することができます。 positionプロパティに対して、relativeabsoluteといった値を選択します。

relative「相対位置」

relativeは、その要素のもとにあった場所を基準として移動します。

HTML <div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
box1 200*100
box2 200*100
box3 200*100

ここではbox2position:relativeを当て, top:100left:200に設定しみます。

CSS .box2{
background-color: seagreen;
position:relative;
top: 100px;
left: 200px;
}

すると、元の場所から右へ200px、下へ100px移動しました。ほかの要素は影響を受けていません。

box1 200*100
box2 200*100
box3 200*100

absolute「絶対位置」

absoluteは、ウィンドウ(<body>)、または親要素を基準として、位置を決めることができます。

先ほど同じようにbox2position:absoluteを当て, top:100left:200に設定しみます。

CSS .box2{
background-color: seagreen;
position:absolute;
top: 100px;
left: 200px;
}

すると、なんとbox2はとんでもないところに行ってしまいました。そして、box2のあった場所がなくなり、box3がその位置に来ました。

position absolute
box1 200*100
box2 200*100
box3 200*100

これはウィンドウが基準となり、そこから右へ200px、下へ100px移動したからです。

position absolute

親要素を基準とする

position:absoluteの基本的な使い方は、親要素に対にして、relativeを当て、動かしたい子要素にabsoluteを当てます。

CSS .wrapper{
position:relative; /*親要素にposition:relative;*/
}
.box2{
position:absolute; /*子要素にposition:absolute;*/
top: 100px;
left: 200px;
}
box1 200*100
box2 200*100
box3 200*100

親要素のwrapperを基準とし、左へ200px、下へ100px移動しました。

position absolute

position:absoluteを使って、画像の中心に文字を配置する

gxy-life.com

HTML <div class="test">
<img src="../../images/mimi.png" alt="">
<p class="logoTest">gxy-life.com</p>
</div>

親要素にposition:relativeを指定し、子要素の文字の部分にposition:absoluteを指定します。top:50%, left:50%とします。 これだけだと、 文字の左上の部分が画像の中心に来てしまうので、transform:translate(-50%, -50%)で、文字全体が画像の中心に来るように調整します。 (注:必要な部分しか記述していません。)

CSS .test{
position: relative
}
.test>img{
margin: 0;
}
.test>.logoTest{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}

まとめ

positionプロパティのrelativeとabsoluteについて解説しました。最初はちょっと混乱しますが、そのうち慣れてきます。relative、absoluteのほかにfixedというのもありますが、また別の機会に説明したいと思います。positionをマスターし、思い通りのデザインができるようにしたいですね。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<