positionがどうも理解できない・・・というあなたに!

この記事を見に来てくれた人なら共感してもらえるのではないかと思いますが、私はこのpositionを理解するまでにものすごい時間がかかりました。何度やっても失敗する。どうやっても崩れるなど。幾度となく、positionと格闘しました。

理解してしまうと、なぜ、あれほど詰まったのか。と思わない気もしないのですが、同じ思いをいただいている人がいたら、参考にしてもらえればと思います。

  • position の大前提
  • 第1のつまづきポイント
  • 第2のつまづきポイント
  • 第3のつまずきポイント

この記事は「2021年01月18日」に書かれた記事です

position の大前提

positionの値は4つです。

static 初期値。設定した内容を戻すときに利用する。
relative 相対位置で配置する際に使用。
absolute 絶対位置で配置。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed 絶対位置に配置。スクロールした際にも位置が固定されたまま。

 

中でも

表示がおかしい・・・

となるのがrerativeとabsoluteです。この記事では、rerativeとabsoluteに焦点を当ててみていきます。

第1のつまづきポイント

相対位置とか絶対位置とか、どこが起点なの?!

そもそもpositionを使おう!
というとき以外、positionを設定することなんてありません。(少なくとも私はありません)。つまりpositionを一度も使用していない場合は、どこにも相対位置や絶対位置を設定する基準を設定していない、ということになります。

ところが、設定してないのに起点は存在します。
そう、設定していないと、ブラウザで見た場合、左上にこの起点が存在しています。

(初期値=左上)

そのため、どこにもposition設定を入れずに、
position:absolurteを設定するとコンテンツなどを無視して画面左上に配置されてしまいます。

  • 白い領域がブラウザー領域とします。
  • グレーの領域は、contentsの領域
  • ピンクの領域は、mainの幅です。
absolute設定領域

上記のように、contentsの領域にpositionを設定していな状態の場合、ブラウザである白い領域の左上が起点となり、absoluteを設定したピンクの枠は、contentsをグレーの枠をはみ出して、白領域の左上に表示されています。

このときの設定は下記のような状態です。

<div class="contents">
<div class="main">absolute設定領域</div>
</div>
</div>
.contents {
width: 80%;
margin: 0 auto;
height: 200px;
background-color: #EEE;
}
.main {
position:absolute;
top:0;
left:0;
width: 150px;
height:150px;
background-color: #EE6557;
}

contentsにpositionの設定が入っていません。
positionを利用する場合、まずどこを起点にするか指定する必要があります

では、contentsにposition:rerativeを設定し、グレーの枠の左上を起点としてみましょう。

例2
  • 白い領域がブラウザー領域とします。
  • グレーの領域は、contentsの領域
  • ピンクの領域は、mainの幅です。
absolute設定領域

今度はcontentsであるグレーの左上を起点として配置されました。
設定したのは、たった一つ。position:relative;のみです。

<div class="contents">
<div class="main">absolute設定領域</div>
</div>
</div>
.contents {
width: 80%;
position: relative;
margin: 0 auto;
height: 200px;
background-color: #EEE;
}

.main {
position:absolute;
top:0;
left:0;
width: 150px;
height:150px;
color: #FFF;
background-color:#EE6557 ;
}

起点がグレーの左上に移動したので、ピンクの領域がグレーの左上から始まりました。

第2のつまづきポイント

次につまづくのがposition:relative;を設定しているにも関わらず、思った位置にposition:absoluteが配置されないことがあることです。そんなときやってしまっているのがposition:relativeの入れ子です。

absoluteは常に一つ上のposition:relative の支配下にいます。

  • 白い領域がブラウザー領域とします。
  • グレーの領域は、contentsの領域
  • ピンクの領域は、mainの幅です。
  • みどりの領域は、contents(グレーの領域)の左上に配置したい。

メイン

説明のために作ったので、こんな設定をすることはないかもしれませんが、上記の場合下記のような設定になっています。

HTML

<div class="contents">
<div class="main"><p>メイン</p>
<div class="mainbox">●</div>
</div>
</div>

CSS

.contents {
width: 80%;
position:relative;
margin: 0 auto;
height: 200px;
background-color: #EEE;
}

.main {
position:relative;
top:0;
width: 150px;
height:150px;
margin:0 auto;
text-align: center;
color :#FFF;
background-color:#EE6557 ;
}

.mainbox {
position:absolute;
top:0;
left:0;
width:30px;
height:30px;
text-align: center;
color :#FFF;
background-color: #16A6B6;
}

mainの中に、mainboxが存在しており、mainにposition:relativeが設定されています。
この場合、mainboxから見た直近の起点はcontentsではなくmainになります。

mainとmainboxが入れ子になった状態で、mainboxである緑の領域を、contentsのグレーの領域の左上に表示させる場合、mainにposition:relativeを設定しないことが必須です。では、mainからposition:relativeを削除してみましょう。

例2

メイン

思い通りの表示になりました。

HTML

<div class="contents">
<div class="main"><p>メイン</p>
<div class="mainbox">●</div>
</div>
</div>

CSS

.contents {
width: 80%;
position:relative;
margin: 0 auto;
height: 200px;
background-color: #EEE;
}

.main {
top:0;
width: 150px;
height:150px;
margin:0 auto;
text-align: center;
color :#FFF;
background-color:#EE6557 ;
}

.mainbox {
position:absolute;
top:0;
left:0;
width:30px;
height:30px;
text-align: center;
color :#FFF;
background-color: #16A6B6;
}

ちなみに、どうしてもmainにposition:relativeが必要な場合、mainとmainboxを入れ子にしなければ、mainboxの起点となるのはcontentsとなるため、例2と同じ表示にすることができます。

例3

メイン

<div class="contents">
<div class="main"><p>メイン</p></div>
<div class="mainbox">●</div>
</div>

CSS

.contents {
width: 80%;
position:relative;
margin: 0 auto;
height: 200px;
background-color: #EEE;
}

.main {
position:relative;
top:0;
width: 150px;
height:150px;
margin:0 auto;
text-align: center;
color :#FFF;
background-color:#EE6557 ;
}

.mainbox {
position:absolute;
top:0;
left:0;
width:30px;
height:30px;
text-align: center;
color :#FFF;
background-color: #16A6B6;
}

positionの設定がうまくいかないというときは、入れ子になっていないかも確認してみましょう!

positionとセットで使用するもの

top: 設定した起点上部からどれくらいの位置に配置するかを指定
left: 設定した起点左からどれくらいの位置に配置するかを指定
right: 設定した起点右からどれくらいの位置に配置するかを指定
bottom: 設定した起点下部からどれくらいの位置に配置するかを指定

第三のつまずきポイント

必要に応じて使うものがもう一つあります。z-index です。

はじめの頃、この「レイヤーを重ねる」という概念が理解できず頭を抱えてしまいました。
完全アナログ人間で、紙が重なるのも、折り紙が重なるのも理解できるのに、パソコン上の要素が重なるということが理解できませんでした。イラストレータは普通に使って、レイヤーを重ねていたのに、なぜかCSSでは理解できない。

話が脱線しそうなので元に戻します。

まず大前提として、z-indexを利用する場合、positionの設定が必要になります。
z-indexのみを設定しても動作しません。必ず、

  • position:relative
  • position:absolute
  • position:fixed

いずれかとセットで設定します。

次に、z-indexをしていない場合、z-index:0の状態と考えてください。
この場合は、HTMLのコードを書いた順番で重なります。

  • 白い領域がブラウザー領域とします。
  • グレーの領域は、contentsの領域
  • ピンクの領域は、box1
  • みどりの領域は、box2
  • 黒の領域は、box3

すべてにposition:absoluteを設定した場合、
① > ② > ③ の順番で上に重なっていくため、見えるのは「第3のコンテンツ」となります。
※消えたわけではなく重なっているだけなので、サイズが異なればチラ見えします。

HTML

<div class="content">
<div class="box1">①</div>
<div class="box2">②</div>
<div class="box3">③</div>
</div>

CSS

.content {
width: 80%;
position:relative;
margin: 0 auto;
height: 200px;
background-color: #EEE;
}

.box1 {
position:absolute;
top:0;
left:0;
width:150px;
height:150px;
color: #FFF;
background-color:#EE6557 ;
}

.box2 {
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
color: #FFF;
background-color: #16A6B6;
}

.box3 {
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
color: #FFF;
background-color: #333;
}
じゃあ、いつも順番通りにかけばいいんじゃないの

という気もしますが、そうは問屋が卸しません。SEOなどを考慮した場合や、どうしても順番通りに並ばせられないときもあります。そんな時に重なり順を変更するのが、z-indexです。

z-indexの値は「1」でも大きい方が上に表示されます。
また、z-indexの値には「-1」などマイナスも設定できます。

例2
  • 白い領域がブラウザー領域とします。
  • グレーの領域は、contentsの領域
  • ピンクの領域は、box1
  • みどりの領域は、box2
  • 黒の領域は、box3

HTMLの順番は先ほどと同じですが、②のコンテンツが一番上になるようにz-indexを設定しました。黒い領域はz-index:2を設定した、緑の領域に隠れて見えなくなりました。

HTML

<div class="content">
<div class="box1">①</div>
<div class="box2">②</div>
<div class="box3">③</div>
</div>

CSS

.content {
width: 80%;
position:relative;
margin: 0 auto;
height: 200px;
background-color: #EEE;
}

.box1 {
position:absolute;
top:0;
left:0;
width:150px;
height:150px;
color: #FFF;
background-color:#EE6557 ;
}

.box2 {
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
color: #FFF;
background-color: #16A6B6;
z-index:2;
}

.box3 {
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
color: #FFF;
background-color: #333;
}

つまずきポイント3点をしっかり把握しておくだけでposition設定は楽になり、複雑な設定もこなせるようになります。
では、よく使う「4-18 上下中央、左右中央にするためのCSS(近日公開予定)」も見てみましょう。

松江ブログ(M2エムツー)

HOME > ホームページ制作 > CSSでホームページを1UP > positionがどうも理解できない・・・というあなたに!

ページトップへ