ヘッダーを固定すると背景画像の高さが変わってしまう。

ヘッダーを固定したいのですが、position: fixed;を指定すると背景の画像の高さが変わってしまいます。
理想は背景画像の上にヘッダーがあり、画像上の下の方にタイトルを配置したいです。
headerをdivで挟んだりしてみましたが結果は同じでした。
原因等どこにあるでしょうか。拙い文章ですみません。
不足等ありましたらご指摘お願いします。

HTML
1<body>
2<div class="wrap">
3<!-- トップ -->
4<div class="img" id="slideshow">
5  <div class="top-text">
6    <header>
7      <h3>Cresta Design</h3>
8
9      <ul class="list">
10        <li class="top-list">
11        <a href="#conce" style="text-decoration:none;">Concept</a>
12       </li>
13       <li class="top-list">
14        <a href="#work" style="text-decoration:none;">Works</a>
15      </li>
16       <li class="top-list">
17         <a href="#serve" style="text-decoration:none;">Service</a>
18       </li>
19       <li class="top-list">
20         <a href="#cont" style="text-decoration:none;">Contact</a>
21       </li>
22      </ul>
23    </header>
24
25    <div class="top-title" id="smile">
26      <h1>Design for Smile.</h1>
27      <h2 class="office">快適なオフィスを<br>デザインする</h2>
28    </div><!-- top-title-->
29
30  </div><!-- top-text -->
31</div><!-- img -->
32
33
34  <div class="concept" id="conce">
35    <h1>CONCEPT — </h1>
36    <h2>“働きたくなる空間”をデザインする<br class="h2-br1">ことで<br class="h2-br2">人々を幸せにする。</h2>
37    <div class="body-img">
38      <p>私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させていただきます。</p>
39      <img src="img/concept-image@2x.jpg">
40    </div>
41  <div class="conce-h3">
42    <h3>Our Concept</h3>
43  </div>
44</div><!-- concept -->
45
46<div class="works-img" id="work">
47  <div class="work-title">
48    <h1> Works— </h1>
49  </div>
50
51 <div class="works-size">
52  <div class="works">
53    <div class="contents">
54     <div class="content">
55       <img src="img/card-img01@2x.jpg">
56       <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
57     </div>
58     <div class="content">
59       <img src="img/card-img02@2x.jpg">
60       <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
61     </div>
62     <div class="content">
63       <img src="img/card-img03@2x.jpg">
64       <p>新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
65     </div>
66    </div><!-- contents -->
67    <div class="view-btn">
68      <a href="#" style="text-decoration:none;">View more</a>
69    </div>
70  </div><!-- works --> 
71  <div class="work-h3">
72    <h3>Our Works</h3>
73  </div>
74
75 
76  </div><!-- works-size -->
77 </div><!-- works-img -->
78
79<div class="service-cont" id="serve">
80   <div class="service-body">
81    <div class="service">
82      <h1>Service—</h1>
83    </div><!-- service -->
84  </div><!-- service-body -->
85
86  <div class="ser-contents">
87    <div class="service-content hover">
88      <img src="img/service-img01@2x.jpg" class="ser-img">
89      <p class="img-p">Hearing</p>
90    </div>
91    <div class="service-content hover">
92      <img src="img/service-img02@2x.jpg" class="ser-img">
93      <p class="img-p">Planning</p>
94    </div>
95    <div class="service-content hover">
96      <img src="img/sevice-img03@2x.jpg" class="ser-img">
97      <p class="img-p">Direction</p>
98    </div>
99   </div><!-- service-contents -->
100
101</div><!-- service-cont -->
102<div class="ser-h3">
103  <h3>Our Service</h3>
104</div>
105
106<div class="contact" id="cont">
107  <div class="contact-size">
108    <div class="contact-form">
109      <div class="cont-h1">
110        <h1>Contact—</h1>
111      </div>
112    <div class="form-text">
113      <p>お気軽にご相談ください。</p>
114      <a href="#" style="text-decoration:none;">Contact</a>
115    </div><!-- form-text -->
116   </div><!-- contact-form -->
117   <div class="con-h3">
118    <h3>Contact Us</h3>
119  </div>
120  </div><!-- contact-size -->
121 </div><!-- contact -->
122  
123
124<!-- フッター -->
125<footer>
126  <h4>©︎cresta.design all rights reserved</h4>
127</footer>
128</div>
129<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
130<script src="index.js"></script>
131
132</body>

CSS
1body {
2  font-family: 'Noto Serif','Noto Serif JP', serif;
3  color: #171717;
4  padding: 0;
5  margin: 0;
6  height: 100%;
7  width: 100%;
8}
9html {
10  height: 100%;
11}
12header {
13  display: flex;
14  justify-content: space-between;
15  height: 50px;
16}
17
18.img {
19  background-image: url(img/fv-bgi_01.jpg );
20  transition: background-image 2.5S ease; /*背景画像をゆっくり変化させる*/
21  background-size: cover;
22  height: auto;
23  width: 100%;
24  padding: 0;
25  margin: 0;
26  background-color: black;
27}
28
29.list {
30  list-style: none;
31  margin-top: 20px;
32  display: flex;
33  flex-direction: row;
34}
35
36.list a {
37  color: rgb(255, 250, 245);
38  margin-right: 50px;
39  font-size: 18px;
40}
41
42.top-title {
43  color: rgb(255, 250, 245);
44  padding: 0;
45  margin: 0;
46}
47
48/* トップの幅調整*/
49.top-text {
50  width: 90%;
51  margin: 0 auto;
52}
53
54.drawer {
55  width: 0;
56  display: none;
57}
58
59header h3 {
60  float: left;
61  color: rgb(255, 250, 245);
62  font-size: 28px;
63  padding: 0;
64  margin-top: 20px;
65  letter-spacing: 3px;
66}
67
68.top-title h1 {
69  font-size: 50px;
70  margin-top: 33%;
71  padding: 0;
72}
73
74.top-title h2 {
75  font-size: 30px;
76  margin-left: 70px;
77  padding-bottom: 80px;
78}
79
80.office br {
81  display: none;
82}
83
84.concept {
85  width: 80%;
86  margin: 0 auto;
87}
88
89.concept h1 {
90  font-size: 60px;
91  margin-top: 50px;
92  display: inline-block;
93  letter-spacing: 7px;
94}
95
96.concept h2 {
97  font-size: 30px;
98  text-align: center;
99  margin-top: 30px;
100}
101
102.conce-h3 h3{
103font-size: 70px;
104color: rgba(252, 242, 229, 0.486);
105display: flex;
106justify-content: flex-end;
107margin: 0;
108padding: 30px 0 30px 0;
109}
110
111
112.body-img {
113  display: flex;
114  margin: 0 auto;
115  margin-top: 60px;
116  width: 90%;
117}
118
119.body-img img {
120  margin-left: 50px;
121  display: block;
122  width: 50%;
123}
124
125.body-img p {
126  margin-top: 60px;
127  font-size: 20px;
128  font-family: 'Osaka';
129  margin-right: 30px;
130  width: 50%;
131}
132
133.concept-h3 {
134  display: flex;
135  justify-content: flex-end;
136  font-size: 70px;
137  color: rgba(252, 242, 229, 0.486);
138  margin-right: 30px;
139  letter-spacing: 10px;
140}
141
142.h2-br1 {
143  display: none;
144}
145
146.contents {
147  display: flex;
148  justify-content: space-between;
149  height: auto;
150  padding-bottom: 90px;
151  width: 90%;
152  margin: 0 auto;
153}
154
155.content {
156  width: 28%;
157  box-shadow: 0px 0px 6px rgba(27, 19, 16, 0.4);
158}
159.content img {
160  width: 100%;
161  vertical-align: bottom;/* 画像とテキストの隙間をうめる*/
162}
163
164.content p {
165  margin: 0 auto;
166  line-height: 45px;
167  font-weight: border;
168  padding:10px 30px;
169  font-size: 15px;
170  background-color:aliceblue;
171  margin-top: 0;
172  height: 40%;
173}
174
175.works {
176  margin: 0 auto;
177}
178
179.works-img {
180  background-image: url(img/works-bgi@2x.jpg);
181  background-size: cover;
182  width: 100%;
183  margin: 0 auto;
184  height: 100%;
185}
186
187.works-size {
188  width: 80%;
189  margin: 0 auto;
190}
191
192.work-title {
193  font-size: 30px;
194  margin-top: 50px;
195  display: inline-block;
196  color: white;
197  text-align: right;
198  width: 90%;
199  letter-spacing: 7px;
200}
201
202.view-btn {
203  margin: 0 auto;
204  display: block;
205  text-align: center;
206}
207
208.view-btn a {
209  background-color: rgb(255, 217, 0);
210  padding: 15px 70px;
211  border-radius: 30px;
212}
213
214.work-h3 h3 {
215width: 90%;
216margin: 0 auto;
217font-size: 70px;
218color: rgba(172, 170, 169, 0.411);
219padding-bottom: 30px;
220padding-top: 50px;
221margin: 0;
222letter-spacing: 10px;
223}
224
225.service h1 {
226  font-size: 60px;
227  width: 100%;
228  letter-spacing: 7px;
229  margin: 0;
230  padding: 30px 0 30px 0;
231}
232
233.service-body {
234  width: 80%;
235  margin: 0 auto;
236}
237
238.service-cont {
239  width: 100%;
240  margin: 0 auto;
241  padding: 0;
242  margin: 0;
243  height: 100%;
244}
245
246.ser-contents {
247  display: flex;
248  width: 100%;
249  margin-bottom: 0;
250}
251
252.service-content {
253  position: relative;
254  width: 100%;
255  margin: 0 auto;
256  font-size: 0;
257  display: flex;
258  -webkit-justify-content: center;
259  justify-content: center;
260  -webkit-align-items: center;
261  align-items: center;
262}
263
264.ser-img {
265  width: 100%;
266}
267
268.img-p {
269  position: absolute;
270  top: center;
271  left: center;
272  color: white;
273  font-size: 30px;
274  display: block;
275}
276
277.ser-h3 h3 {
278  font-size: 70px;
279  color: rgba(252, 242, 229, 0.486);
280  display: flex;
281  justify-content: flex-end;
282  width: 90%;
283  margin: 0;
284  padding: 30px 0 30px 0;
285  letter-spacing: 10px;
286}
287
288/*ホバー*/
289.hover {
290  z-index: 1;
291  background-color: black;/*黒を重ねる*/
292}
293
294.ser-img:hover {
295  opacity: 0.5;/*黒を透かす*/
296  transition: all 0.3s ease-in-out;
297}
298
299.contact {
300  background-image: url(img/contact-bgi@2x.jpg);
301  width: 100%;
302  background-size: cover;
303  height: 100%;
304}
305
306.contact-form {
307  width: 80%;
308  margin: 0 auto;
309}
310
311.cont-h1 h1{
312  color: white;
313  text-align: right;
314  width: 100%;
315  letter-spacing: 7px;
316  margin-bottom: 80px;
317  font-size: 60px;
318  padding-top: 80px;
319}
320
321.form-text {
322  text-align: center;
323}
324
325.form-text p {
326  color: white;
327  height: 50%;
328  margin-bottom: 50px;
329  font-size: 20px;
330}
331
332.form-text a {
333  background-color: rgb(255, 217, 0);
334  padding: 15px 70px;
335  border-radius: 30px;
336  margin: 100px;
337}
338
339.con-h3 h3 {
340  font-size: 70px;
341  color: rgba(172, 170, 169, 0.411);
342  padding-bottom: 100px;
343  padding-top: 50px;
344  width: 90%;
345  margin: 0 auto;
346  letter-spacing: 10px;
347}
348
349footer {
350  height: 50px;
351  bottom: 0;
352  margin: 0;
353  padding:0;
354}
355
356footer h4 {
357  text-align: center;
358  font-weight: normal;
359  font-size: 15px;
360  line-height: 40px;
361  margin: 0;
362  padding: 0;
363}
364

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

回答1件

ベストアンサー

提示のコードには、position: fixed; がありませんが、

css
1header {
2  display: flex;
3  justify-content: space-between;
4  height: 50px;
5  width: 100%;
6  position: fixed;
7  top: 0;
8}

上記のような感じで header を固定すると div.img に設定した背景画像の高さが変わるという現象のことでしょうか。

「マージンの相殺」という現象が起きていて、子要素のマージンが div.img の外側にはみ出しているのが原因です。

対処法としてはいろいろありますが、例えば、親要素に overflow: hidden; を追加すればいいでしょう。

css
1.top-title {
2  color: rgb(255, 250, 245);
3  margin: 0;
4  overflow: hidden; /* 追加 */
5}

投稿2021/03/22 00:48

hatena19

総合スコア33715

azaz_wb

2021/03/22 01:35

「マージンの相殺」初めて知りました。解決できました。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ヘッダーを固定すると背景画像の高さが変わってしまう。

関連した質問