回答編集履歴
2
修正
answer
CHANGED
|
@@ -24,17 +24,26 @@
|
|
|
24
24
|
|
|
25
25
|
.c1{
|
|
26
26
|
background:blue;
|
|
27
|
+
|
|
27
|
-
/*
|
|
28
|
+
/* [4] */
|
|
29
|
+
position: relative;
|
|
30
|
+
z-index: 3; /* 値が1番大きいので最前面 */
|
|
28
31
|
}
|
|
29
32
|
.c2{
|
|
30
33
|
margin-left: -50px; /* 重ねるために追加。値は好きなように変更してください。 */
|
|
31
34
|
background:red;
|
|
35
|
+
|
|
32
|
-
/*
|
|
36
|
+
/* [4] */
|
|
37
|
+
position: relative;
|
|
38
|
+
z-index: 2;
|
|
33
39
|
}
|
|
34
40
|
.c3{
|
|
35
41
|
margin-left: -50px; /* 重ねるために追加。値は好きなように変更してください。 */
|
|
36
42
|
background:green;
|
|
43
|
+
|
|
37
|
-
/*
|
|
44
|
+
/* [4] */
|
|
45
|
+
position: relative;
|
|
46
|
+
z-index: 1; /* 値が1番小さいので最背面 */
|
|
38
47
|
}
|
|
39
48
|
|
|
40
49
|
/* [2] */
|
|
@@ -45,6 +54,8 @@
|
|
|
45
54
|
}
|
|
46
55
|
```
|
|
47
56
|
|
|
57
|
+
以下、解説です。
|
|
58
|
+
|
|
48
59
|
---
|
|
49
60
|
**[1] floatに「center」という値はない**
|
|
50
61
|
floatで横並びのレイアウトを実装する場合、「float: left;」をすべての要素 (青、赤、緑の円) に指定
|
|
@@ -67,4 +78,12 @@
|
|
|
67
78
|
正円にするため`box-sizing: border-box;`を指定してください。
|
|
68
79
|
|
|
69
80
|
参考URL:
|
|
70
|
-
[https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing](https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing)
|
|
81
|
+
[https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing](https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing)
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
** [4] z-indexの仕様について **
|
|
85
|
+
z-indexは、position: relative;やposition: absolute;と一緒に指定しなければ意味を成しません。
|
|
86
|
+
また、z-indexの値が大きければ前面、小さければ背面に表示されます。
|
|
87
|
+
|
|
88
|
+
参考URL:
|
|
89
|
+
[https://developer.mozilla.org/ja/docs/Web/CSS/z-index](https://developer.mozilla.org/ja/docs/Web/CSS/z-index)
|
1
修正
answer
CHANGED
|
@@ -27,10 +27,12 @@
|
|
|
27
27
|
/* z-index:1; */
|
|
28
28
|
}
|
|
29
29
|
.c2{
|
|
30
|
+
margin-left: -50px; /* 重ねるために追加。値は好きなように変更してください。 */
|
|
30
31
|
background:red;
|
|
31
32
|
/* z-index:2; */
|
|
32
33
|
}
|
|
33
34
|
.c3{
|
|
35
|
+
margin-left: -50px; /* 重ねるために追加。値は好きなように変更してください。 */
|
|
34
36
|
background:green;
|
|
35
37
|
/* z-index:3; */
|
|
36
38
|
}
|