CSSの「position relative」の役割

CSSの「position relative」の役割 CSS
この記事は約3分で読めます。
スポンサーリンク

「position:relative;」って何のためにあるの?

その疑問を解決します。

「position」とは

そのままポジション(位置)を整えるプロパティ。
次に、どの様にポジションを整えるかというと「relative(相対的)」?

「relative(レラティブ)」とは

relative=相対的と言われても一般的じゃないし理解が難しけど
「基点」みたいに考えています。
例えば以下のHTMLがあった場合

【HTML】

<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>

表示順は、「.top」「.center」「.bottom」で上から順番に表示されます。
これに以下のようなCSSを当てた場合

【CSS】

.top {
  position: relative;
}
.center {
  position: relative;
}
.bottom {
  position: relative;
}

表示順は変わらず「.top」「.center」「.bottom」となる。
これだけだと「position:relative;」は、書いても書かなくても一緒。

でも「relative」は、「position」の基点となる要素としてとても重要。
例えば上のHTMLの「.center」の子要素に「position:absolute;」がある場合、
「absolute(アブソリュート)」は「.center」の左上が基点となる。

【HTML】

<div class="top">トップ</div>
<div class="center">
  センター
  <div class="center-inner">
    センターの中の要素
  </div>
</div>
<div class="bottom">ボトム</div>

【CSS】

.top {
  position: relative;
}
.center {
  position: relative;
}
.center-inner {
  position: absolute;
  top: 0;
  left: 0;
}
.bottom {
  position: relative;
}

基点になる「relative」が無いと、「absolute」を指定した要素は画面の左上に寄ってしまって
レイアウトがやり辛くなっちゃうから大事な要素なんだ。
「absolute」は、要素の高さも幅もなくて、
ここの右側にある緑いろしたボックス見て分かる通りフワフワでめっちゃ扱いずらい。

relative

absolute

これは背景の灰色(relative)を基点にして、右上からちょっとずらして緑の玉を配置している。
この様に要素の上に重ねるボタンとかの表示に「absolute」は向いている。
例えば背景に灰色じゃなくて写真を設定して、その上にシェアボタンやダウンロードボタンなんかを設置すると
とっても機能的なデザインになります。

「relative」の大事さが少しでも伝わるといいけれど、
ウェブサイトを作ると一度は登場するプロパティなので、頭の片隅に置いておいてもらえたら嬉しいです。

SNSフォローボタン
エンデ・バタローをフォローする
CSS

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました