divのposition relativeが適用されていない。div要素同士が重なる

position relativeのの正しい使い方を把握できていないため重なってしまったり。理想的な場所に配置されません。適用されておりません。

行いたいことは
main-rightの中の
box-a
box-b
box-c
を綺麗に配置させたいです。
３つのboxは色形right40px left60px空けるまでは同じです。
aは上から40px空けたところ
bはaから10px空けたところ
cはbから10px空けたところかつ下から40px空けたところに配置したいです。
よろしくおねがいします。

HTML
1<!DOCTYPE html>
2<html lang="ja" >
3  <head>
4       <meta charset="utf-8">
5       <title></title>
6       <link rel="stylesheet" href="style.css">
7       <link rel="stylesheet" href="reset.css">
8
9  </head>
10  <body>
11  <div class="wrapper">
12    <div class="header"></div>
13        <div class="main clearfix">
14          <div class="main-left">  </div>
15          <div class="main-right clearfix">
16            <div class="box-a box"></div>
17            <div class="box-b box"></div>
18            <div class="box-c box"></div>
19            </div>
20        </div>
21      <div class="footer"></div>
22   </div>
23 </body>
24</html>
25

CSS
1body {
2  margin: 0;
3}
4
5.wrapper {
6  position: absolute;
7  top: 0;
8  right: 0;
9  bottom: 0;
10  left: 0;
11  width: 400px;
12  height: 450px;
13  margin: auto;
14}
15
16.clearfix::after {
17    content: "";
18    display: block;
19    clear: both;
20}
21
22.header {
23  background-color: #141f40;
24  height: 100px;
25  width: 400px;
26}
27
28.main {
29  height: 250px;
30  width: 400px;
31}
32
33.main-left {
34  height: 250px;
35  width: 150px;
36  background-color: #80bfa8;
37  float: left;
38}
39
40.main-right {
41  height: 250px;
42  width: 250px;
43  background-color: #8c2727;
44  float: left;
45}
46
47.box{
48  background-color: #ff863f;
49  width: 140px;
50  height: 40px;
51  position: relative;
52  left: 40px;
53  right: 60px;
54  border-style: solid;
55  border-width: 5px;
56  border-color: #FFFFFF;
57}
58
59.box-a{
60  position: relative;
61  top: 40px;
62  bottom: 160px;
63}
64
65.box-b{
66  position: relative;
67margin: 10px 0px;
68}
69
70.box-c{
71  position: relative;
72  top: 10px;
73  bottom: 40px;
74}
75
76.footer {
77  height: 100px;
78  background-color: #d98d30;
79  width: 400px;
80}
81

kei344

2019/08/25 13:10

https://teratail.com/questions/208145 この質問と内容がほぼ同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、こちらの質問を削除されるよう運営に連絡されることをお勧めします。 https://teratail.com/help#delete-question https://teratail.com/contact/input

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

回答1件

ベストアンサー

よくわかんないですけど、前回質問見る限り、

position:relative と position:absolute の使い方　逆　じゃないですか？

HTML
1<div class="test">
2   <div class="box-a box"></div>
3   <div class="box-b box"></div>
4   <div class="box-c box"></div>
5</div>

CSS
1.box-a{
2  position: absolute;
3  top: 40px;
4  bottom: 10px;
5}
6
7.box-b{
8  position: absolute;
9  top:100px;
10}
11
12.box-c{
13  position: absolute;
14  top: 160px;
15  bottom: 40px;
16}
17
18.test {
19  position:relative;
20  width:100%;
21  height:100%;
22}