この記事では、「現在位置から相対位置を指定するposition: relative;」について解説します。
position: relative; は現在位置を基準に、相対位置を指定することができます。position: relative; は単体で使用せず、position: absolute; とセットで使うことが多いです。
要素の位置を指定するのに、最も使用される方法の一つなので学習していきましょう！
なお、positionプロパティはrelativeの他にも下記の4つがあります。
- absolute
- fixed
- static
- sticky
これらは、別の記事でも細かく紹介しているのでpositionプロパティを用いたrelative以外でできることをしらいたい方はぜひ読んでみてください。
position: absolute;で親要素を基準に絶対配置を指定する方法はこちら
position: fixed;で要素を固定する方法はこちら
position: static;でpositionの指定をリセットする方法はこちら
position: sticky;で要素を指定した位置に固定させる方法はこちら
- position: relative; の使い方
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
要素の現在位置を基準に相対位置を指定するposition: relative; の使い方
positionプロパティは、要素の配置を指定するプロパティです。positionプロパティの初期値はstaticで、relativeは要素の現在位置を基準に相対位置を指定することができます。なお、staticはrelativeやabsoluteのように位置を指定することができません。
基本書式は次のようになります。
セレクタ {
position: relative;
}positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて要素の配置を指定します。4つ全てを使わずに適用することはできますが、要素の位置を確定させるため、最低でも2つは適用するようにしましょう。
例えば次のようなHTMLとCSSがあります。こちらは比較用のため、positionは適用していません。
<div class="box"></div>.box {
width: 200px;
height: 200px;
background: orange;
}出力結果
See the Pen position-relative前 by ZeroPlus (@zeroplus-programming) on CodePen.
現状ではboxクラスにpositionを適用していないので、画面左上に要素が配置されています。こちらのboxクラスにposition: relative;と、top, leftを適用すると、次のようになります。
.box {
width: 200px;
height: 200px;
background: orange;
position: relative; /*追記*/
top: 50px; /*追記*/
left: 50px; /*追記*/
}出力結果
See the Pen position-relative後 by ZeroPlus (@zeroplus-programming) on CodePen.
position: relative; と、top, leftの指定によって、要素が元いた位置から下に50px、元いた位置から左左に50pxの位置に配置されます。このように、position: relative; は、相対位置を基準に位置が決定されます。ここでいう相対位置とは、本来その要素が表示される位置を基準とした位置です。
イメージとしては次の画像のようになります。
今、あなたが書いている、そのコード…
自信を持って正しいと言えますか？
現場では、自分本位の「自己流コード」は敬遠されがち。
しかし独学を続けていると、
良くない癖が自然と身に付いてしまいます。
やはり、プロから学ぶことはとても大切なのです。
無料の学習サービス「ZeroPlus Gate」で、
コーディングの基礎を固めてみませんか？
position: relative; の特徴1 - 要素を移動しても、要素の高さを維持したまま配置
position: relative; は、要素の高さを維持したまま配置されるので、下にある要素が詰まることはありません。
例えば、次のようなposition: relative; を適用する前の状態のHTMLがあります。
<div class="box"></div>
<div class="min-box"></div>.box {
width: 200px;
height: 200px;
background: orange;
}
.min-box {
width: 100px;
height: 100px;
background: red;
}出力結果
See the Pen relative前2 by ZeroPlus (@zeroplus-programming) on CodePen.
現状ではposition: relative; を指定していないので、通常配置の状態です。
boxクラスに、position: relative; とtop, leftを適用すると次のようになります。
.box {
width: 200px;
height: 200px;
background: orange;
position: relative; /*追記*/
top: 50px; /*追記*/
left: 130px; /*追記*/
}
.min-box {
width: 100px;
height: 100px;
background: red;
}出力結果
See the Pen relative後2 by ZeroPlus (@zeroplus-programming) on CodePen.
boxクラスの要素を移動しても、min-boxクラスの要素は上に詰まることなく現状の位置を維持しています。
position: relative; で要素を移動しても、その要素は高さを維持しています。position: relative; で移動した要素以外の要素が現状の位置から詰まることはありません。
position: relative; の特徴2 - z-indexで重なり順を指定できる
position: relative; は、要素の重なり順を指定する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クラス要素が配置されます。
このように要素の重なり順を指定する場合は、z-indexプロパティを適用してあげましょう。ただし、positionプロパティ（relative, absolute, fixed, sticky）の適用が必要になります。なお、staticはz-indexは反映されません。
難しいと感じ始めたら、プロから学ぶとき
ここまで順調に学んできたのに、"Position"を学んでから、
「あれ、なんか難しい？」と感じてしまったあなたへ。これからまだまだ難しくなるかも。
そのまま独学で進めていくと、つまづく回数も増えて挫折の原因になるかもしれません。
一方で、疑問をすぐエンジニアに質問できれば学習はスムーズに進みます。
無料の学習サービス「ZeroPlus Gate」ならば、
現役エンジニアへとSlackを使って無制限で質問できるため、
あなたを悩ませる疑問を全て解消して、ストレスなく学習を進められます。
ZeroPlus Gateの詳細は、以下のリンクより専用ページをご覧ください
position: relative; の特徴3 - positon: 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; について解説しました。relativeは単体で使用することは少ないです。特徴をよく理解して使用するようにしましょう。
positionプロパティは、今回解説したrelativeの他にも「absolute」「fixed」「static」「sticky」などがあります。このようにCSSは、プロパティ一つでも覚えることがたくさんあるので、少しずつ学習を進めていきましょう。
Web制作はその他にも学ぶべき知識が数多くあります。Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。
どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
position: relative; まとめ
- 要素の現在位置を基準に相対位置を指定する
- 要素を移動した後でも、高さを保持している
- absoluteとセットで活用する
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
