arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[CSS]position:relativeとabsoluteの違い〜position編vol.3

前々回前回とpositionについて書いてきましたが、締め括りとして「結局relativeとabsoluteはどう違うの?」というところを説明します。“親要素にrelative+子要素にabsolute”のセットが基本ですが、もう少し細かいところを詰めていきましょう。

position:relativeの動き

50px*50pxの灰色のボックスの下に、position:relativeを指定した<div>を配置しました。

See the Pen relative_box1 by necomacustom (@tamayura) on CodePen.27739


移動はtop:0px;left:0px;でこの配置です。

次に、クラスrelativeをつけた要素を下に50px、右に50px動かしてみます。position:relativeは「その要素が本来配置される位置」を基準にして、そこから指定した距離の場所へ移動となるので…クラスrelativeをつけた要素を下に50px、右に50px動かしてみます。

See the Pen relative_box2 by necomacustom (@tamayura) on CodePen.27739


おおよそ下の画像のように動いています。もちろん負の値も設定可能です。

position:relativeの特性

position:relativeには一つ気をつける特性があります。

要素を移動させた後も、元の場所にその要素の高さが残ってしまう

それはどういうことなのか、見ていきましょう。

わかりやすくするために、先ほどのコードにもう一つboxを追加します。

See the Pen relative_box3 by necomacustom (@tamayura) on CodePen.27739


2つのboxの間が空いていますね。これが上記の特性にあたり、間に移動した要素の高さが残ってしまっているということになります。

position:absoluteの動き

今度はposition:absoluteです。
relativeの時と同様に基本のコードを書いて、boxも設置してみます。

See the Pen absolute_box_default by necomacustom (@tamayura) on CodePen.27739


あれ、何かおかしいですね。absoluteを設定した要素自体はウィンドウを基準としているので、正しい位置なのですが…<div>自体にマージンを持っているようなので、リセットをかけます。
これをCSSの一番上に書いておきましょう。それでは、改めて。

See the Pen absolute_box1 by necomacustom (@tamayura) on CodePen.27739


position:absoluteの場合、top:0px;left:0px;でこの配置です(察しのいい方はもしかしたらこの時点で違いがわかるかもしれませんね)。
それではrelative同様に動かしていきます。

See the Pen absolute_box2 by necomacustom (@tamayura) on CodePen.27739


おや?position:relativeと見た目が違いますね。もう一つboxを追加してみましょう。

See the Pen absolute_box3 by necomacustom (@tamayura) on CodePen.27739


空間は残らず2つ目の灰色のボックスは上に詰め、1つ目のボックスのすぐ下に表示されましたね。つまり要素の高さを残さずに要素が移動したということです。
position:relativeposition:absoluteの違い、わかりましたでしょうか?


CSSもいろいろなプロパティや値があり、更にCSS3ではより複雑かつ便利なものも一杯あって私も追いつけていないのですが、基本あってこそだと思います。少しづつ確実に覚えていくことを心がけていきたいですね。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP