【CSS】 「position: absolute;」で要素の重なり順が崩れる

こんにちは、さち です。

ウェブサイトを作っているときに、CSS で position: absolute; を使うと「要素」が上手く順番に重ならないことがありました。

思い通りの重なり順にするには position の仕様を理解しないといけなかったので、備忘録としてこの記事を残しておきます。

やりたいこと

HTML

<div id="wrapper">
  <div id="blue"  >1<div>
  <div id="orange">2<div>
  <div id="green" >3<div>
</div>

結果（こうなって欲しい）

CSS を書く

おしかった方法

CSS

#wrapper {
  position: relative;
}

#blue {
  position: absolute;
  top: 100px;
  left: 100px;
  background: skyblue;
}

#orange {
  position: absolute;
  top: 50px;
  left: 50px;
  background: gold;
}

#green {
  background: limegreen;
}

#blue, #orange, #green {
  width: 150px;
  height: 150px;
}

結果

div#blue div#orange div#green は HTML の記述の順番的に div#green が一番上になりそうですが違います。

div#orange が一番上になってしまいました。

修正したところ

CSS

見やすいように、修正した部分だけ抜き出しました。

#green {
  position: relative;
  background: limegreen;
}

#green に position: relative; を追加しました。（ static（初期値） 以外なら他の値でもOK）

結果

これで、div#green の要素が最前面に重なるようになりました。

原因（興味がある人向け）

このような現象が起きた原因は、「CSS」の position プロパティです。

position が static（初期値） 以外の値になった「要素」は、通常の重なり順から離脱して「独立」します。（語弊はありますが）簡単にいうと、その「要素」が少しだけ「浮く」んです。

今回の場合、position: absolute; になっている div#blue div#orange は少し浮くので、 div#green よりも上に重なります。

div#green も position: relative; になると、div#blue div#orange と同じように少し浮くので、通常と同じ重なり順になったわけです。

ちなみに、この少しだけ「浮く」現象は、下記のような CSS の値を「初期値以外」に変更した場合に起きます。

今回は「要素」の重なり順が崩れるという話でしたが、z-index が上手く動作しない原因にもなるので気をつけましょう。

関連記事

【CSS】 「疑似要素」を「親要素」より後ろに重ねる方法

こんにちは、さち です。ウェブサイトを作っているときに、「疑似要素 ::before ::after 」を「親要素」のテキストよりも後ろに重ねるようにしたいことがありました。z-index で簡単にできると思ったら通常とは少し違う記述が必要

at.sachi-web.com

2025.04.16