position: relative,absoluteの3階層以上の表示位置

position: relative,absoluteによる位置制御について
2階層なら
親要素 : relative (box1)
子要素 : absolute (box2)
で問題ありませんが子要素にさらに孫要素を追加した時に
子要素 : absoluteとなり
孫要素(box3)の扱いがわかりません。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <link rel="stylesheet" href="style.css" />
6    <title>Document</title>
7  </head>
8  <body>
9    <div class="box box1">
10      <div class="box box2">
11        <div class="box box3"></div>
12      </div>
13      </div>
14    </div>
15  </body>
16</html>

CSS
1.box {
2  width: 200px;
3  height: 200px;
4}
5
6.box1 {
7  position: relative;
8  background-color: royalblue;
9}
10
11.box2 {
12  position: absolute;
13  background-color: red;
14  top: 20px;
15  left: 20px;
16}

maisumakun

2020/07/02 08:12

どのように配置したいのでしょうか？

tempra_o

2020/07/02 08:17

上の要素に対して top:20px; left:20px; ずらした表示がしたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

「absoluteの親要素はrelativeでなくてはいけない」とお考えなのでしょうが、それは勘違いです。

position プロパティが absolute の場合、包含ブロックは position の値が static 以外 (fixed, absolute, relative, sticky) の直近の祖先要素におけるパディングボックスの辺によって構成されます。

レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN

↑難しく書いてありますが、大雑把に言うと、topやleftの基準を祖先要素にしたいなら、その要素には「static 以外 (fixed, absolute, relative, sticky)」を**positionに設定しなくてはいけない**、というだけのことです。

つまり、absoluteの親要素はabsoluteでもかまわないし、親要素を基準にしないなら何も設定しなくてもかまわない、ということです。

投稿2020/07/02 08:21