回答編集履歴

1

追記

2018/11/17 06:58

投稿

yoshinavi
yoshinavi

スコア3521

test CHANGED
@@ -27,3 +27,371 @@
27
27
 
28
28
 
29
29
  仮に、上2つと同じように4番目を設定すると、`position:absolute;`との違いが分かりやすいかと思いますので、ご自身でいろいろな設定で確認してみてください。
30
+
31
+
32
+
33
+ ---
34
+
35
+ -追記-
36
+
37
+ 質問のあったサンプルです
38
+
39
+
40
+
41
+ 基本配置
42
+
43
+ ```HTML
44
+
45
+ <!DOCTYPE html>
46
+
47
+ <html>
48
+
49
+ <head>
50
+
51
+ <meta charset="utf-8">
52
+
53
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
54
+
55
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
56
+
57
+ <title>example</title>
58
+
59
+ <style>
60
+
61
+ * {
62
+
63
+ margin: 0;
64
+
65
+ padding: 0;
66
+
67
+ box-sizing: border-box;
68
+
69
+ }
70
+
71
+
72
+
73
+ body {
74
+
75
+ padding: 100px;
76
+
77
+ }
78
+
79
+
80
+
81
+ .box-a {
82
+
83
+ width: 300px;
84
+
85
+ height: 50px;
86
+
87
+ padding: 10px;
88
+
89
+ background-color: lightcoral;
90
+
91
+ }
92
+
93
+
94
+
95
+ .box-b {
96
+
97
+ width: 300px;
98
+
99
+ height: 50px;
100
+
101
+ padding: 10px;
102
+
103
+ background-color: lightskyblue;
104
+
105
+ }
106
+
107
+
108
+
109
+ .box-c {
110
+
111
+ width: 300px;
112
+
113
+ height: 50px;
114
+
115
+ padding: 10px;
116
+
117
+ background-color: khaki;
118
+
119
+ }
120
+
121
+
122
+
123
+ .box-d {
124
+
125
+ width: 300px;
126
+
127
+ height: 50px;
128
+
129
+ padding: 10px;
130
+
131
+ background-color: limegreen;
132
+
133
+ }
134
+
135
+ </style>
136
+
137
+ </head>
138
+
139
+ <body>
140
+
141
+ <div class="box-a">box-a</div>
142
+
143
+ <div class="box-b">box-b</div>
144
+
145
+ <div class="box-c">box-c</div>
146
+
147
+ <div class="box-d">box-d</div>
148
+
149
+ </body>
150
+
151
+ </html>
152
+
153
+ ```
154
+
155
+ ---
156
+
157
+ 3番目(box-C)に`position:relative;`設定
158
+
159
+ ```HTML
160
+
161
+ <!DOCTYPE html>
162
+
163
+ <html>
164
+
165
+ <head>
166
+
167
+ <meta charset="utf-8">
168
+
169
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
170
+
171
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
172
+
173
+ <title>example</title>
174
+
175
+ <style>
176
+
177
+ * {
178
+
179
+ margin: 0;
180
+
181
+ padding: 0;
182
+
183
+ box-sizing: border-box;
184
+
185
+ }
186
+
187
+
188
+
189
+ body {
190
+
191
+ padding: 100px;
192
+
193
+ }
194
+
195
+
196
+
197
+ .box-a {
198
+
199
+ width: 300px;
200
+
201
+ height: 50px;
202
+
203
+ padding: 10px;
204
+
205
+ background-color: lightcoral;
206
+
207
+ }
208
+
209
+
210
+
211
+ .box-b {
212
+
213
+ width: 300px;
214
+
215
+ height: 50px;
216
+
217
+ padding: 10px;
218
+
219
+ background-color: lightskyblue;
220
+
221
+ }
222
+
223
+
224
+
225
+ .box-c {
226
+
227
+ width: 300px;
228
+
229
+ height: 50px;
230
+
231
+ padding: 10px;
232
+
233
+ background-color: khaki;
234
+
235
+ position: relative;
236
+
237
+ top: 10px;
238
+
239
+ left: 10px;
240
+
241
+ }
242
+
243
+
244
+
245
+ .box-d {
246
+
247
+ width: 300px;
248
+
249
+ height: 50px;
250
+
251
+ padding: 10px;
252
+
253
+ background-color: limegreen;
254
+
255
+ }
256
+
257
+ </style>
258
+
259
+ </head>
260
+
261
+ <body>
262
+
263
+ <div class="box-a">box-a</div>
264
+
265
+ <div class="box-b">box-b</div>
266
+
267
+ <div class="box-c">box-c</div>
268
+
269
+ <div class="box-d">box-d</div>
270
+
271
+ </body>
272
+
273
+ </html>
274
+
275
+ ```
276
+
277
+ ---
278
+
279
+ 3番目(box-C)に`position:absolute;`設定
280
+
281
+ ```HTML
282
+
283
+ <!DOCTYPE html>
284
+
285
+ <html>
286
+
287
+ <head>
288
+
289
+ <meta charset="utf-8">
290
+
291
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
292
+
293
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
294
+
295
+ <title>example</title>
296
+
297
+ <style>
298
+
299
+ * {
300
+
301
+ margin: 0;
302
+
303
+ padding: 0;
304
+
305
+ box-sizing: border-box;
306
+
307
+ }
308
+
309
+
310
+
311
+ body {
312
+
313
+ padding: 100px;
314
+
315
+ }
316
+
317
+
318
+
319
+ .box-a {
320
+
321
+ width: 300px;
322
+
323
+ height: 50px;
324
+
325
+ padding: 10px;
326
+
327
+ background-color: lightcoral;
328
+
329
+ }
330
+
331
+
332
+
333
+ .box-b {
334
+
335
+ width: 300px;
336
+
337
+ height: 50px;
338
+
339
+ padding: 10px;
340
+
341
+ background-color: lightskyblue;
342
+
343
+ }
344
+
345
+
346
+
347
+ .box-c {
348
+
349
+ width: 300px;
350
+
351
+ height: 50px;
352
+
353
+ padding: 10px;
354
+
355
+ background-color: khaki;
356
+
357
+ position: absolute;
358
+
359
+ top: 10px;
360
+
361
+ left: 10px;
362
+
363
+ }
364
+
365
+
366
+
367
+ .box-d {
368
+
369
+ width: 300px;
370
+
371
+ height: 50px;
372
+
373
+ padding: 10px;
374
+
375
+ background-color: limegreen;
376
+
377
+ }
378
+
379
+ </style>
380
+
381
+ </head>
382
+
383
+ <body>
384
+
385
+ <div class="box-a">box-a</div>
386
+
387
+ <div class="box-b">box-b</div>
388
+
389
+ <div class="box-c">box-c</div>
390
+
391
+ <div class="box-d">box-d</div>
392
+
393
+ </body>
394
+
395
+ </html>
396
+
397
+ ```