この記事では、「要素を任意の場所に配置するpositionのrelativeとabsolute」について解説します。
position: relative; は現在位置を基準に、相対位置を指定することができます。position: absolute; は親要素を基準に、絶対配置を指定することができます。position: relative; は単体で使用せず、position: absolute; とセットで使うことが多いです。
CSSで要素の位置を指定するのに、最も使用される方法です。いっしょに学習していきましょう！
- relativeとabsoluteをセットで使う方法
- relativeとabsoluteが効かないときの対処法
- relativeとabsoluteの使い所3選
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
positonのrelativeとabsoluteの基本的な使い方
positionプロパティは要素の配置を指定するプロパティで、初期値はstaticです。relativeは要素の現在位置を基準に相対位置を指定し、absoluteは要素の絶対配置を指定することができます。
なお、staticはrelativeやabsoluteのように位置を指定することができません。
基本書式は次のようになります。
基本書式
親要素セレクタ {
position: relative;
}
子要素セレクタ {
position: absolute;
top: 値;
right: 値;
bottom: 値;
left: 値;
}positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて要素の配置を指定します。4つ全てを使わずに適用することもできますが、位置を確定させるために、最低でも2つは適用するようにしましょう。
left: 0; や top: 0; 」を省略してしまうことがあるのですが、余白が同時についていると位置が変わってしまうので、お気をつけください！
position を指定すると通常配置から浮く
親要素にposition: relative; を適用し、子要素にposition: absolute; を適用すると、その子要素は、浮いたような状態になります。
まずは、親要素（parentクラス）にposition: relative; を適用し、子要素（boxクラス）には何も適用しない場合の配置を見てみましょう。
<div class="parent">
<div class="box"></div>
<div class="min-box"></div>
</div>.parent {
width: 500px;
height: 500px;
background: skyblue;
position: relative;
}
.box {
width: 200px;
height: 200px;
background: orange;
}
.min-box {
width: 100px;
height: 100px;
background: green;
}出力結果
See the Pen relative-absolute2 by ZeroPlus (@zeroplus-programming) on CodePen.
boxクラスの要素にposition: absolute; を適用すると、次のようになります。
.box {
width: 200px;
height: 200px;
background: orange;
position: absolute; /*追記*/
top: 50px; /*追記*/
left: 50px; /*追記*/
}出力結果
See the Pen relative-absokute3 by ZeroPlus (@zeroplus-programming) on CodePen.
このように、boxクラスの要素にposition: absolute; を適用したことによって、適用した要素が浮いたような状態になります。これによって、position: absolute;を適用していないmin-boxクラス要素が上に詰まるようになります。
下記画像のようなイメージです。
relativeとabsoluteはセットで使う
position: relative; は、基本的に単体で使用することは少ないです。position: absolute; を使いたい場合に、その親要素に対してposition: relative; を適用してセットで使用します。
ここではrelativeとabsoluteをセットで使用する場合を簡単に解説します。
<div class="parent">
<div class="box"></div>
</div>.parent {
width: 500px;
height: 500px;
background: skyblue;
position: relative;
}
.box {
width: 200px;
height: 200px;
background: orange;
position: absolute;
top: 50px;
left: 50px;
}出力結果
See the Pen relative-absolute by ZeroPlus (@zeroplus-programming) on CodePen.
boxクラス要素にはposition: absolute; を適用し、その親要素（ここではparentクラスの要素）にposition: relative; を適用しています。親要素にposition: relative; を適用すると、position: absolute; を適用した子要素を動かす際の基準点が親要素になります。
下の画像のようなイメージです。
absoluteを単体で使う場合
例えば次のようなHTMLとCSSがあります。こちらは比較用のため、positionは適用していません。
<div class="box"></div>.box {
width: 200px;
height: 200px;
background: orange;
}出力結果
See the Pen position前 by ZeroPlus (@zeroplus-programming) on CodePen.
現状では、positionプロパティを適用していないので、要素は画面左上に出力されています。
boxクラスの要素にposition: absolute; を適用してみましょう。親要素はないので、position: relative; の影響は受けていません。
.box {
width: 200px;
height: 200px;
background: orange;
position: absolute; /*追記*/
top: 50px; /*追記*/
left: 50px; /*追記*/
}出力結果
See the Pen absoluteのみ by ZeroPlus (@zeroplus-programming) on CodePen.
position: absolute; を適用し、top, left の2つのプロパティを同時に適用します。top, left の2つのプロパティによって、要素が画面の上から50px、leftは画面の左から50pxの位置に配置されました。
このように、position: absolute; は要素の絶対配置を指定することができます。
通常、position: absolute; を使用する場合は、その親要素にposition: relative; を適用して、セットで使用します。relativeを親要素に適用することで、その親要素がabsoluteで動かす要素の基準になります。
absolute単体で使用した場合で位置を指定すると、基準位置は下記のようになります。
- top: 基準の上からの距離
- bottom: 基準の下からの距離
- left: 基準の左からの距離
- right: 基準の右からの距離
absoluteを適用した要素の、親要素にposition: relative; を適用した場合で位置を指定すると、基準位置は下記のようにrelativeがついている要素起点からの位置になります。
- top: relativeがついている要素基準の上からの距離
- bottom: relativeがついている要素基準の下からの距離
- left: relativeがついている要素基準の左からの距離
- right: relativeがついている要素基準の右からの距離
z-indexで重なり順を変更
positionプロパティはstaticを除き、要素の重なり順を指定するz-indexを適用することができます。
要素にz-indexを適用しない場合の、２つの要素の並びを確認してみましょう。
.box {
width: 200px;
height: 200px;
background: orange;
position: relative;
top: 50px;
left: 80px;
}
.min-box {
width: 100px;
height: 100px;
background: red;
}出力結果
See the Pen relative-並び順 by ZeroPlus (@zeroplus-programming) on CodePen.
z-indexを指定しない場合は、boxクラス要素はposition: relative; を適用していないmin-boxクラス要素に対して、上に重なるように配置されます。
min-boxクラスの要素の裏側に、boxクラスの要素を配置する場合は次のようになります。
.box {
width: 200px;
height: 200px;
background: orange;
position: relative;
top: 50px;
left: 80px;
z-index: -1; /*追記*/
}
.min-box {
width: 100px;
height: 100px;
background: red;
}出力結果
See the Pen relative-並び順 by ZeroPlus (@zeroplus-programming) on CodePen.
z-indexプロパティは、数字が大きいほど前に配置され、数字が小さいほど後ろに配置されます。ここではboxクラス要素にz-index: -1;を指定しているので、min-boxクラス要素の裏側にboxクラス要素が配置されます。
次に、parentクラス要素の子要素である、boxクラス要素にz-index を適用した場合を見てみましょう。
例えば、boxクラスの要素をmin-boxクラスの要素の裏側に配置する場合は、次のようになります。
.parent {
width: 500px;
height: 500px;
background: skyblue;
position: relative;
z-index: 0; /*追記*/
}
.box {
width: 200px;
height: 200px;
background: orange;
position: absolute;
top: 50px;
left: 50px;
z-index: -1; /*追記*/
}出力結果
See the Pen relative-absokute-z-index by ZeroPlus (@zeroplus-programming) on CodePen.
boxクラスの要素がmin-boxクラスの要素の裏側に配置されました。z-indexは、数字が大きいほど前に表示され、数字が小さいほど後ろに表示されます。
下記画像のようなイメージです。
positionを指定した要素は浮いたような状態になるため、要素同士が重なる場合はz-indexプロパティで重なり順を指定しましょう。
positionのrelativeとabsoluteの使い所3選！
positionのrelativeとabsoluteを使う場面としては、次の3つがあります。
- posiitonで上下左右中央寄せする
- positionで要素を重ねる
- positionとz-indexを組み合わせる
一つずつ紹介していきます。
position で上下左右中央寄せする
positionのrelativeとabsoluteで要素を上下左右中央に配置することができます。中央寄せは見た目で綺麗な配置で、よく使われる配置なので覚えておきましょう。
<div class="parent">
<div class="box"></div>
</div>.parent {
width: 500px;
height: 500px;
background: skyblue;
position: relative;
}
.box {
width: 250px;
height: 250px;
background: orange;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}出力結果
See the Pen positionで中央寄せ by ZeroPlus (@zeroplus-programming) on CodePen.
まずは、position: absolute; が適用されているboxクラス要素に、top: 50%; left: 50%; を指定します。これによって、親要素であるparentクラス要素の左上を起点に、上・左それぞれ50％の位置にboxクラス要素が配置されることになります。
しかしこのままでは、boxクラス要素の左上がparentクラス要素の真ん中に配置されてしまうため、上下左右の中央揃えにはなりません。そのため、transformで縦横にboxクラス要素の-50%分動かすことで、boxクラス要素を中央に移動させます。
transform適用前後の状態は、下記画像のようなイメージです。
transform適用前
top: 50%; left: 50%; で中央寄せになるかと思いますが、topから半分(50%)、leftから半分(50%)移動するので、それだけだとこんな感じになってしまうんですね〜。transform適用後
transform: translate();はとても難しいところですが、簡単にいうと「要素の移動」です！transform: translate(x, y);で、x方向（横方向に）.boxのwidthの半分移動します！そして、y方向（縦方向に）.boxのheightの半分移動します！
position で要素を重ねる
position を使って要素の上に要素を重ねたい場合には、relativeとabsoluteで要素を重ねることができます。
<div class="box">
<h2 class="box__title">見出し</h2>
<p class="box__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>.box {
margin-top: 40px;
padding-top: 20px;
padding-bottom: 20px;
position: relative;
border: 1px solid orange;
border-radius: 4px;
padding: 20px 10px;
}
.box__title {
position: absolute;
top: -30px;
left: -1px;
background: orange;
padding: 10px 11px;
font-size: 14px;
display: block;
width: 100%;
max-width: 100px;
}
.box__text {
font-size: 12px;
}出力結果
See the Pen positionで重ねる by ZeroPlus (@zeroplus-programming) on CodePen.
position を使わない場合、box__titleクラス要素は見た目上、boxクラス要素の中でbox__textクラス要素と縦並びになります。
box要素の枠線の上にbox__title要素を重ねたいときは、box__title要素にposition: absolute; 、その親要素にあたるbox要素にposition: relative; を適用し、top, leftで位置を調節します。
positionプロパティ適用前後の状態は、下記画像のようなイメージです。
position: absolute; 適用前
position: absolute; 適用後
position とz-indexを組み合わせる
position で疑似要素を表示させ、z-indexと組み合わせることで要素を重ねることができます。
z-indexは数字が小さいほど要素の後ろに配置されます。
<section class="section">
<div class="inner">
<div class="box__imgbox">
<img src="dummy.png" alt="">
</div>
<div class="box__textbox">
<p class="box__text">テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</div>
</section>.section {
padding-top: 20px;
padding-bottom: 20px;
}
.inner {
padding-right: 20px;
padding-left: 20px;
display: flex;
align-items: flex-start;
}
.box__imgbox {
position: relative;
width: 100%;
margin-right: 20px;
max-width: 260px;
}
.box__imgbox::before {
position: absolute;
content: "";
top: -10px;
left: -10px;
width: 100%;
height: 100%;
background: orange;
z-index: -1;
}
.box__imgbox img{
width: 100%;
height: 100%;
display: block;
}
.box__textbox {
width: 100%;
}
.box__text {
font-size: 12px;
}出力結果
画像にposition: relative; を適用し、疑似要素としてオレンジの背景を表示させます。疑似要素にz-index: -1; を適用して画像の後ろに配置しています。
position のrelativeとabsoluteが効かないときの対処法
position プロパティが効かない場合は下記のような理由が考えられます。
- 親要素にposition: relative; を適用していない
- top, left, bottom, rightなど位置の指定を間違えている
- 親要素にoverflow: hidden; を適用している
- z-indexが負けている
- 要素に高さやpaddingを指定していない
親要素にposition: relative; を適用していない
positionのabsoluteは、親要素や先祖要素にrelativeを適用していない場合、top, leftなどの位置を指定していても基準位置がページ全体となります。
この場合、配置したい要素（absoluteを適用した要素）の親要素に対してposition: relative; を適用し、子要素の基準位置を親要素に確定させてあげましょう。
top, left, bottom, rightなど位置の指定を間違えている
親要素にpositon: relative; 、その子要素にposition: absolute; を適用した後、top, leftなどで要素の位置を指定します。その位置の指定を間違えて、画面外に要素が配置されている場合があります。
その場合は、例えばtop: 0;、left: 0; などを適用して要素の位置を確認してみてください。要素の位置を確認できたら、検証ツールを使って位置を動かしていきましょう。
親要素にoverflow: hidden; を適用している
親要素にposition: relative; とoverflow: hidden; をいっしょに適用している場合、その子要素が親要素の範囲外に配置されていると、overflow: hidden;によって子要素が非表示になってしまいます。
<div class="parent-hidden">
<div class="box"></div>
</div>.parent-hidden {
position: relative;
width: 500px;
height: 500px;
background: lightgreen;
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
padding: 100px;
background: orange;
position: absolute;
top: 0;
left: 300px;
}出力結果
See the Pen positionとoverflow: hidden; by ZeroPlus (@zeroplus-programming) on CodePen.
この場合、overflow: hidden; を外すか、overflow: hidden; を適用した要素の外側の要素に、relativeとabsoluteをセットで適用してあげましょう。
<div class="parent-hidden">
</div>
<!-- overflow: hidden;を適用した要素の外側に要素を移動する -->
<div class="parent">
<div class="box"></div>
</div>.parent-hidden {
width: 500px;
height: 500px;
background: lightgreen;
overflow: hidden;
}
.parent {
width: 500px;
height: 500px;
background: skyblue;
position: relative;
}
.box {
width: 100px;
height: 100px;
padding: 100px;
background: orange;
position: absolute;
top: 0;
left: 300px;
}出力結果
See the Pen positionとoverflow: hidden;2 by ZeroPlus (@zeroplus-programming) on CodePen.
z-indexが負けている
z-indexは数値が大きいほど前に表示されます。z-indexの数字の適用の仕方によっては、absoluteで配置したい要素が要素の裏側に隠れてしまうことがあります。
z-indexの数値をチェックしてみましょう。
要素にheight高さやpaddingを指定していない
relativeを適用した要素にheightやpaddingを適用していない状態で、配置したい要素にabsoluteを適用すると、親要素は高さがなくなります。
これは、親要素の高さが子要素の高さに依存していて、absoluteを適用することで子要素が親要素から独立してしまうためです。
例えば下記のような場合です。
<div class="parent-wrap">
<div class="parent">
<div class="box"></div>
</div>
</div>.parent-wrap {
padding: 20px;
background: lightgreen;
}
.parent {
width: 500px;
background: skyblue;
}
.box {
width: 250px;
height: 500px;
background: orange;
}出力結果
See the Pen 親要素にheightやpaddinの指定 by ZeroPlus (@zeroplus-programming) on CodePen.
parentクラス要素はheightを適用しておらず、子要素のboxクラス要素によって高さを保持している状態です。ここでparentクラス要素にposition: relative;、boxクラス要素にabsoluteを適用すると次のようになります。
.parent-wrap {
padding: 20px;
background: lightgreen;
}
.parent {
width: 500px;
background: skyblue;
position: relative; /*追記*/
}
.box {
width: 250px;
height: 500px;
background: orange;
position: absolute; /*追記*/
}出力結果
See the Pen 親要素にheightやpaddinの指定2 by ZeroPlus (@zeroplus-programming) on CodePen.
boxクラス要素にabsoluteを適用したことによって、boxクラス要素が浮いたような状態になり、parent要素は高さがなくなりました。parent-wrap要素は、自身にpaddingが適用されているため、padding分の高さを保持しています。
このような場合は、親要素にheightやpaddingを適用して親要素の高さを保持してあげましょう。
まとめ
positionのrelativeとabsoluteについて解説しました。positionプロパティの特徴をよく理解して使用するようにしましょう。
position: absolute; は自由に配置できる分、扱いが難しいです。多用しすぎると、レスポンシブの際にスタイルの調整が面倒になるパターンもあります。positionプロパティは、positionプロパティを使わないとレイアウトを再現できない場合に使うようにしましょう。
positionプロパティは、今回解説したabsoluteの他にも「fixed」「relative」「static」「sticky」などがあります。CSSは、プロパティ一つでも覚えることがたくさんあるので、少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
position: absolute; まとめ
- relativeとセットで活用する
- z-indexで重なり順を指定できる
- absoulteを適用すると、その他の要素は詰まるように配置される
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
