CSSのpositionプロパティとpositionの値に指定ができるrelativeとabsoluteを使用すると、ボックスの表示位置をコントロールすることができるようになります。
positionでrelativeとabsoluteの使い方は使い慣れないと少し難しさを感じることがありました。
使い方のコツを掴めば、そうでもないのですが使い方のポイントとしては、どの要素を表示位置の基点にするかです。
CSSのpositionの使い方
CSSのpositionプロパティは、ボックスの表示位置を指定するときに使います。
HTMLの要素が形成するボックスの表示位置を決めるために要素をセレクタにしてpositionプロパティを指定します。
positionにはいくつかの指定できる値があり、何も値を指定しないと初期値のstaticが適用されます。このstaticの値は位置調整してもCSSが効きません。
ですが初期値を変更してボックスの位置を相対位置か絶対位置かを指定することができます。このときの指定できる値に「relative」と「absolute」があります。
positionでrelativeの使い方
position: relativeは元の表示位置から相対的に要素の位置を動かしたいときに指定する使い方ができます。
相対的な位置とは「本来あるべき場所を基準とした位置」を意味します。
これを踏まえてpositionで指定するrelativeの使い方は、position指定した要素を本来あるべき場所を基点とし表示位置をコントロールする使い方ができます。
relativeを元の位置を基点に指定
実際に元要素にCSSでrelativeを使ってボックスの表示位置を指定してみます。
<div>
<h2>ボックス位置</h2>
</div>
positionを指定するHTML要素はdiv要素を親として、h2を子要素にしてます。
div {
width: 400px;
margin: auto;
padding: 10px;
background: #2ac5b3;
}
h2 {
background-color: greenyellow;
margin: 0;
padding: 5px;
position: relative;
}
CSSはサンプルのh2が元の位置が表示位置の基点になるように「relative」を指定します。これでサンプルのh2の表示位置を調整できるようになります。
でもまだ実際の表示位置は指定していないので表示位置を調整するCSSを指定すると位置を移動できます。以下の説明で位置調整をしていきます。
relativeの位置調整
positionのrelativeを要素(サンプルはh2)に指定したら、ボックスの基点から上下左右に位置調整をするCSSを使います。
まずは画像を見てください。
上記の画像はコードサンプルに使用しているh2要素、つまりrelativeを指定してる要素を基点にして位置をずらしています。この場合の指定するCSSの使い方は以下のようにCSSを書きます。
div {
width: 400px;
margin: auto;
padding: 10px;
background: #2ac5b3;
}
h2 {
background-color: greenyellow;
margin: 0;
padding: 5px;
position: relative;
top: 25px;
left: 40px;
}
表示位置の調整に関係してるCSSは「top」と「left」です。CSSで基点の要素(サンプルならh2)の上からtopで25pxずらす、横はleftで40pxずれて移動してます。
このときに表示位置を右からなら「right」下からなら「bottom」も使えます。
ここまでのposition: relativeの使い方を一旦まとめます。
- 表示位置を調整したい要素にposition: relativeを指定する
- 具体的な位置調整は「top」「left」「right」「bottom」を組み合わせて配置する
という使い方です。この使い方を基本として覚えておきながら、表示位置の指定で親要素が含まれる場合の使い方「position: absoluteも使う場合」はどのような使い方をするのかを以下から説明します。
positionでabsoluteの使い方
CSSのposition指定で使う値のabsoluteは親要素を基点にボックスの表示位置を絶対位置で調節することができます。ただし基点にする親要素にはpositionを指定して使うようにします。
表示位置を指定するのに親要素を使ったり、rerativeとabsoluteを組み合わせたりと少しややこしくなるのもここからですが、ようは表示位置を調整したい要素をどこの基準に合わせて調整するかというだけのことなのです。
それがpositionのrelativeとabsoluteに関しては、元要素を基準にするか親要素を基準に位置調整するかの違いだけの使い方が変わるというだけのことなんです。
親要素にrelativeを使う
ここまでは元の要素を基点にボックスの位置を移動させましたが、positionにabsoluteも指定する場合にはpositionのrelative指定を親要素を基点にするために使います。
HTMLとCSSのサンプルから見てください。
<div class="box">
<h2 class="x">ボックス位置</h2>
<p>うちの猫のびびおくんがPCのキーボードの上に乗ってくるから部屋に戻ると謎の暗号が入力されてる。もちろん解読不可能</p>
</div>
HTMLはここまでの説明と同じくdivが親要素でh2が子要素のボックスです。p要素も含めてみました。
.box {
width: 400px;
margin: auto;
padding-top: 25px;
position: relative;
background: #22c4b7;
}
.x {
background-color: #dfff1c;
margin: 0;
padding: 5px;
position: absolute;
}
CSSはHTMLで書いた親要素divにposition: relativeを指定します。これで親要素のdivはh2のボックスの位置指定をするための基点にすることができます。
親要素を基点にする場合のpositionの使い方では「表示位置を調整したい要素の親要素にrelativeを指定」します。
そして実際に位置指定する要素(サンプルならh2)、つまり子要素にはabsoluteを指定します。
- 親要素 position: relative
- 子要素 position: absolute
「セットで組み合わせた使い方をする」と覚えておくいいかと思います。
子要素をabsoluteにする
.box {
max-width: 400px;
margin: auto;
padding-top: 25px;
position: relative;
background: #22c4b7;
}
.x {
background-color: #dfff1c;
margin: 0;
padding: 5px;
position: absolute;
top: 0;
left: 0;
}
親要素にrelativeを指定したら子要素のh2にはCSSでposition: absoluteを指定します。absoluteは絶対位置で指定ができます。
絶対位置の場合は、間に他の要素があっても指定する位置が絶対の表示位置になります。
例えば親要素の中に3つの要素があるとして一番下の要素をabsolute指定して表示位置をtop:0;とleft:0;で指定した場合などには、その間の要素を飛び越えて親要素の左上の表示位置をします。
少し難しいですが使えるようになるとデザインするテクニックの幅が広がります。
最後は子要素のh2にposition: absoluteを指定したボックスの表示位置を調節して終わりたいと思います。
absoluteの位置指定
親要素を基点に指定した子要素のposition:absoluteの位置指定の調整はrelativeで元の要素に指定したときと同じ使い方で「top」「left」「right」「bottom」を組み合わせて位置調整できます。
上記の画像のサンプルでは親要素のdivにrelativeを指定して、子要素のh2にはCSSでposition: absoluteを指定しただけの表示位置です。この表示位置から「top」「left」「right」「bottom」を指定して表示位置をコントロールします。
左上配置
左上の配置はtop:0とleft:0を指定します。
右上配置
右上の配置はtop:0とright:0の組み合わせで指定します。
左下配置
左下の配置ならbottom:0とleft:0の指定をします。
右下配置
右下に配置するならbottom:0とright:0を組み合わせて位置調整します。
「top」「left」「right」「bottom」の位置指定はマイナス値も受け付けます。
top: -15pxとleft: -15pxで親要素の右上を突き抜けて配置することができます。
まとめ
CSSのpositionプロパティとpositionの値に指定ができるrelativeとabsoluteを使って、元要素や親要素を基点にしてボックスの表示位置をコントロールする使い方でした。
今回紹介した使い方はpositionのrelativeとabsoluteの使い方の基本的な内容です。
基本的なことを応用したりアイデア次第ではボックスのデザインをするレパートリーの幅は広がるのではないかと思いますので、暇な時間があるときにでもボックスをごにょごにょとデザインして今後に活かしてみてください。