回答編集履歴
2
修正
test
CHANGED
|
@@ -50,7 +50,13 @@
|
|
|
50
50
|
|
|
51
51
|
background:blue;
|
|
52
52
|
|
|
53
|
+
|
|
54
|
+
|
|
53
|
-
/*
|
|
55
|
+
/* [4] */
|
|
56
|
+
|
|
57
|
+
position: relative;
|
|
58
|
+
|
|
59
|
+
z-index: 3; /* 値が1番大きいので最前面 */
|
|
54
60
|
|
|
55
61
|
}
|
|
56
62
|
|
|
@@ -60,7 +66,13 @@
|
|
|
60
66
|
|
|
61
67
|
background:red;
|
|
62
68
|
|
|
69
|
+
|
|
70
|
+
|
|
63
|
-
/*
|
|
71
|
+
/* [4] */
|
|
72
|
+
|
|
73
|
+
position: relative;
|
|
74
|
+
|
|
75
|
+
z-index: 2;
|
|
64
76
|
|
|
65
77
|
}
|
|
66
78
|
|
|
@@ -70,7 +82,13 @@
|
|
|
70
82
|
|
|
71
83
|
background:green;
|
|
72
84
|
|
|
85
|
+
|
|
86
|
+
|
|
73
|
-
/*
|
|
87
|
+
/* [4] */
|
|
88
|
+
|
|
89
|
+
position: relative;
|
|
90
|
+
|
|
91
|
+
z-index: 1; /* 値が1番小さいので最背面 */
|
|
74
92
|
|
|
75
93
|
}
|
|
76
94
|
|
|
@@ -89,6 +107,10 @@
|
|
|
89
107
|
}
|
|
90
108
|
|
|
91
109
|
```
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
以下、解説です。
|
|
92
114
|
|
|
93
115
|
|
|
94
116
|
|
|
@@ -137,3 +159,19 @@
|
|
|
137
159
|
参考URL:
|
|
138
160
|
|
|
139
161
|
[https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing](https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing)
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
** [4] z-indexの仕様について **
|
|
168
|
+
|
|
169
|
+
z-indexは、position: relative;やposition: absolute;と一緒に指定しなければ意味を成しません。
|
|
170
|
+
|
|
171
|
+
また、z-indexの値が大きければ前面、小さければ背面に表示されます。
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
参考URL:
|
|
176
|
+
|
|
177
|
+
[https://developer.mozilla.org/ja/docs/Web/CSS/z-index](https://developer.mozilla.org/ja/docs/Web/CSS/z-index)
|
1
修正
test
CHANGED
|
@@ -56,6 +56,8 @@
|
|
|
56
56
|
|
|
57
57
|
.c2{
|
|
58
58
|
|
|
59
|
+
margin-left: -50px; /* 重ねるために追加。値は好きなように変更してください。 */
|
|
60
|
+
|
|
59
61
|
background:red;
|
|
60
62
|
|
|
61
63
|
/* z-index:2; */
|
|
@@ -63,6 +65,8 @@
|
|
|
63
65
|
}
|
|
64
66
|
|
|
65
67
|
.c3{
|
|
68
|
+
|
|
69
|
+
margin-left: -50px; /* 重ねるために追加。値は好きなように変更してください。 */
|
|
66
70
|
|
|
67
71
|
background:green;
|
|
68
72
|
|