回答編集履歴

1

修正

2020/05/10 01:47

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -1,3 +1,147 @@
1
+ 追記しました。文字で縦方向に伸びてしまう要素にposition: absolute;が指定されているのが問題です。
2
+
3
+ なので
4
+
5
+ .blue、.greenにposition: relative;を指定し、背景の.redと.yellowにはposition: absolute;を指定するようにしています。
6
+
7
+
8
+
9
+ ```CSS
10
+
11
+ .aa {
12
+
13
+ height: 300px;
14
+
15
+ }
16
+
17
+ .content {
18
+
19
+ position: relative;
20
+
21
+ }
22
+
23
+
24
+
25
+ .inner {
26
+
27
+ width: 1100px;
28
+
29
+ margin: 0 auto;
30
+
31
+
32
+
33
+ /* 追加 */
34
+
35
+ max-width: 100%;
36
+
37
+ position: relative;
38
+
39
+ z-index: 1000;
40
+
41
+ }
42
+
43
+
44
+
45
+ .blue {
46
+
47
+ background-color: blue;
48
+
49
+ min-height: 100px;
50
+
51
+ /* position: absolute; */
52
+
53
+ position: relative;
54
+
55
+ top: -50px;
56
+
57
+
58
+
59
+ /* 追加 */
60
+
61
+ z-index: 1000;
62
+
63
+ }
64
+
65
+ .red {
66
+
67
+ background-color: red;
68
+
69
+ height: 200px;
70
+
71
+
72
+
73
+ /* 追加 */
74
+
75
+ position: absolute;
76
+
77
+ top: 0;
78
+
79
+ left: 0;
80
+
81
+ width: 100%;
82
+
83
+ height: 100%;
84
+
85
+ }
86
+
87
+
88
+
89
+ .text {
90
+
91
+ width: 90%;
92
+
93
+ }
94
+
95
+
96
+
97
+ .green {
98
+
99
+ background-color: green;
100
+
101
+ min-height: 100px;
102
+
103
+ /* position: absolute; */
104
+
105
+ position: relative;
106
+
107
+ top: -50px;
108
+
109
+
110
+
111
+ /* 追加 */
112
+
113
+ z-index: 1000;
114
+
115
+ }
116
+
117
+ .yellow {
118
+
119
+ background-color: yellow;
120
+
121
+ height: 200px;
122
+
123
+
124
+
125
+ /* 追加 */
126
+
127
+ position: absolute;
128
+
129
+ top: 0;
130
+
131
+ left: 0;
132
+
133
+ width: 100%;
134
+
135
+ height: 100%;
136
+
137
+ }
138
+
139
+ ```
140
+
141
+
142
+
143
+ ---
144
+
1
145
  `min-height`を使うといかがでしょうか?
2
146
 
3
147