【HTML/CSS】positionプロパティとz-indexプロパティ

もくじ

前提

positionプロパティ

要素に対し基準位置からの配置位置を指定するときに用いられるプロパティです。

区別 意味
static - 初期値
relative 相対位置指定 自身が基準の要素となり、相対的に指定
absolute 絶対位置指定 親要素を基準に絶対位置を指定
fixed 絶対位置指定 サイト全体を基準に絶対位置で固定したい場合に指定
sticky 粘着位置指定 指定した値を超えるまではstatic、その後はfixedの特徴となる

以下のように指定します。

position: absolute;

距離指定のプロパティ

positionプロパティをstatic以外で指定した時に有効。

プロパティ 意味
top 要素の上辺の距離を指定する。
leftと共に使用することが多い
left 要素の左辺の距離を指定する。
topと共に使用することが多い
right 要素の右辺の距離を指定する。
bottomと共に使用することが多い
bottom 要素の下辺の距離を指定する。
rightと共に使用することが多い

以下のように、値には数値を指定します。

top: 10px;
left: 0; // 0は単位不要

要素の配置順

通常、要素は記述した順番通りに配置されます。

  • HTML
<div class="box green"></div>
<div class="box pink"></div>
.box {
  width: 5rem;
  height: 5rem;
 }

(色のクラスはカラー設定のみなので割愛)

このHTMLの場合、特に指定しない限りgreenクラスの次に、pinkクラスが配置されます。

基準の位置

positionプロパティを指定しない場合、前述したとおり通常の配置順になります。そこで、どこを基準にして要素を配置するかを指定する時に用いるのが、positionプロパティです。

それぞれの違い

static(初期値)

特に指定しなければこれです。

topなど数値指定しても位置指定の効果を得られないので、位置指定したい場合は後述のabsoluteなどを指定します。

また、次項のz-indexプロパティを指定したい場合は、static以外を指定します。

absolute(要素同士を重ねたり)

通常、要素同士は重なっていません。

しかし、position: absolute;を使えば、要素同士を重ねて表示することが出来ます。

  • HTML
<div class="green"></div>
<div class="pink"></div>

要素を重ねるためにposition: absolute;を指定します。

今回はpinkクラス要素をgreenクラス要素に重ねます。pinkクラスを、本来の位置からどれほど移動させるか指定すればOK。topプロパティとleftプロパティを使います。

.pink {
  position: absolute;
  top: 3rem;
  left: 1.5rem;
}

もちろん、重ねるだけでなく位置を変更させるためにも使えます。

.pink {
  position: absolute;
  top: 3rem;
  left: 10rem;
}

relative(親要素を基準に)

親(祖先も可)要素にposition: relative;と指定すると、その親要素を基準にして子要素の位置を指定することができます。

下を例にしてみます。(カラー指定は割愛)

  • HTML
<div class="parent">
  <div class="box green"></div>
  <div class="box pink"></div>
</div>
  • CSS(position指定なし
.parent {
  width: 15rem;
  height: 12rem;
  margin: 2rem;
}
.box {
  width: 5rem;
  height: 5rem;
}

わかりやすいように、親要素に色とマージンをつけて位置をずらしています。白地はサイト全体とします。

親要素にrelativeを指定し、そこから相対的に移動させたい要素にはabsoluteを指定します。

  • CSS(position指定あり
.parent {
  position: relative; // 追加
  width: 15rem;
  height: 12rem;
  margin: 2rem;
}
.box {
  width: 5rem;
  height: 5rem;
}
.pink {
  position: absolute; // 追加
  top: 3rem; // 追加
  left: 1.5rem; // 追加
}

もし親要素にrelativeを指定しなかった場合、基準要素はページ全体となります。

.parent {
  // relativeを削除
  width: 15rem;
  height: 12rem;
  margin: 2rem;
}

pinkクラス(親要素もピンク系にしてしまい反省)のCSSを改めて確認すると、サイト全体に対して指定されているのがわかります。

.pink {
  position: absolute;
  top: 3rem;
  left: 1.5rem;
}

fixed(要素を固定)

fixedを指定すると、指定した位置に固定されます。基準点はサイト全体の左上になります。

サイドバーやヘッダー、フッターなどに用いることが多く、スクロールしても表示しておきたい要素に対して指定します。

sticky(途中から固定)

topなどで指定した位置にくるまでは通常の要素とかわりませんが、指定した位置になるとそこに固定されます。

たとえば、top: 0px:(0でもpxなど単位必須)を指定したとすると、スクロールして要素の基準点がtop: 0px:になった位置に固定されます。

  • HTML
<div class="box green"></div>
<div class="box pink"></div>
<div class="box blue">
  <p>1行目</p>
  <p>2行目</p>
  <p>3行目</p>
</div>
.box {
  width: 15rem;
  height: 5rem;
}
.pink {
  position: sticky;
  top: 0px;
}
.blue {
  height: 100rem;
}

↓スクロール

↓スクロール

stickyを指定したpinkクラスだけが固定されています。pinkクラスの下にあるはずのblueクラスの要素がpinkクラスを超えて上にスクロールされていきます。

z-index(重なり順)

通常、後に記述された要素が手前に重なります。

その重なり順を任意に変更できます。

z-indexプロパティは要素の重なりの優先順位を指定するプロパティです。

z-index: 値;

値は整数で入力し、大きい数値のものほど手前に表示されます。マイナスは可能ですが、小数点は指定できません。

z-indexを指定するには、同じ要素にpositionプロパティが必須になります。ただしstatic(初期値)だとz-indexは効きません。

.pink {
  position: absolute;
  top: 3rem;
  left: 1.5rem;
}

↓これをz-indexを指定して重ね順を逆にします。

.green {
  position: absolute;
  z-index: 1;
}

.pink {
  position: absolute;
  top: 3rem;
  left: 1.5rem;
  z-index: 0;
}

greenクラスが手前になり、重なり順が逆になりました!

豆知識

z-indexプロパティの値は±2147483647だそうです。絶対必要ない桁ですね。

ただし、どんなことがあっても重ね順を一番手前にしたい!!っていう要素がある場合など、範囲内であれば必要以上に大きい値を指定しても問題ありません。

z-index: 10000;

基本的に何も指定していない場合はz-index:0;です。そのためマイナスの値にすると、何も指定していない要素よりも奥に配置されます。

まとめ

positionはとても頻出するプロパティですが、理解していないとうまく表現できないことも多いので、是非理解して活用していきましょう!

参考URL

position - CSS: カスケーディングスタイルシート | MDN

z-index - CSS: カスケーディングスタイルシート | MDN

z-indexの使い方:CSSで重なり順を指定する