質問編集履歴

1

ソースコードの追加

2020/07/02 08:23

投稿

tempra_o
tempra_o

スコア3

test CHANGED
File without changes
test CHANGED
@@ -2,12 +2,88 @@
2
2
 
3
3
  2階層なら
4
4
 
5
- 親要素 : relative
5
+ 親要素 : relative (box1)
6
6
 
7
- 子要素 : absolute
7
+ 子要素 : absolute (box2)
8
8
 
9
9
  で問題ありませんが子要素にさらに孫要素を追加した時に
10
10
 
11
11
  子要素 : absoluteとなり
12
12
 
13
- 孫要素の扱いがわかりません。
13
+ 孫要素(box3)の扱いがわかりません。
14
+
15
+
16
+
17
+ ```html
18
+
19
+ <!DOCTYPE html>
20
+
21
+ <html lang="ja">
22
+
23
+ <head>
24
+
25
+ <meta charset="UTF-8" />
26
+
27
+ <link rel="stylesheet" href="style.css" />
28
+
29
+ <title>Document</title>
30
+
31
+ </head>
32
+
33
+ <body>
34
+
35
+ <div class="box box1">
36
+
37
+ <div class="box box2">
38
+
39
+ <div class="box box3"></div>
40
+
41
+ </div>
42
+
43
+ </div>
44
+
45
+ </div>
46
+
47
+ </body>
48
+
49
+ </html>
50
+
51
+ ```
52
+
53
+
54
+
55
+ ```CSS
56
+
57
+ .box {
58
+
59
+ width: 200px;
60
+
61
+ height: 200px;
62
+
63
+ }
64
+
65
+
66
+
67
+ .box1 {
68
+
69
+ position: relative;
70
+
71
+ background-color: royalblue;
72
+
73
+ }
74
+
75
+
76
+
77
+ .box2 {
78
+
79
+ position: absolute;
80
+
81
+ background-color: red;
82
+
83
+ top: 20px;
84
+
85
+ left: 20px;
86
+
87
+ }
88
+
89
+ ```