要素が重なって後続の記述がうまく表示されない

いつもお世話になっております。

掲題の件ですが、positionなどを消して修正を試みましたが
変わらずです。何が悪いのかわからないのでぜひご教示くださいませ。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>isara.制作LP模写</title>
6  <link rel="stylesheet" type="text/css" href="stylesheet.css">
7  <link rel="stylesheet" type="text/css" href="responsive.css">
8  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
9  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
10</head>
11<body>
12  <header>
13    <div class="header-warpper">
14      <div class="header-inner">
15        <div class="img-logo">
16          <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="">
17          <p>バンコクのノマドエンジニア育成講座</p>
18        </div>
19        <div class="header-right">
20          <a href="" class="header-btn">お問い合わせ / 資料請求はこちら</a>
21        </div>
22        <div class=sp-header-right>
23          <i class="fas fa-clipboard-list"></i>
24          <a href="" class="sp-header-btn">資料請求</a>
25        </div> 
26      </div>
27    </div>
28  </header>
29
30  <div class = "top-warpper">
31    <div class="top-message">
32      <h3>プログラミングで<br>
33          人生の安定を手にいれよう</h3>
34      <img class="top-logo">
35      <p>バンコクのノマドエンジニア育成講座<br>
36          iSara[イサラ]</p>    
37    </div>
38  </div>
39
40
41  <script src="script.js"></script>
42</body>
43

stylesheet.css
1
2body{
3  font-family: "Meiryo";
4  margin: 0;
5}
6
7header{
8  width:100%;
9  position:fixed;
10  background-color: #fff;
11  z-index:10;
12}
13.header-inner{
14 height: 100px;
15 max-width: 1170px;
16 margin: 0 auto;
17 display: flex;
18 justify-content: space-between;
19
20}
21.img-logo{
22  display: flex;
23  margin-left:15px ;
24}
25.img-logo img{
26  width: 126px;
27  height: 50px;
28  padding:10px 5px;
29}
30.img-logo p{
31  margin-top: 31px;
32}
33.header-right{
34  text-align: center;
35  margin-right: 15px;
36}
37
38.header-btn{
39  width: 317px;
40  max-width: 100%;
41  height: 45px;
42  border:solid 1px #DA6B64;
43  background-color: #DA6B64;
44  border-radius:50px;
45  display: block;
46  margin-top: 14px;
47}
48.header-right a{
49  text-decoration: none;
50  line-height: 45px;
51  color:rgb(243, 237, 237);
52}
53
54
55
56.subtitle{
57  position:absolute;
58  top: 8px;
59  left:10px;
60  font-size: 10px;
61  font-weight: 600;
62  letter-spacing: 0px;
63}
64
65.subtitle p{
66  font-weight: 600;
67  margin-bottom: 0;
68}
69.headcontact{
70  box-sizing: border-box;
71}
72.contactpc{
73  cursor:pointer;
74  position: absolute;
75  right: 0;
76  top: 16px;
77  color:#fff;
78  padding: 11px 40px;
79  background-color: #da6b64;
80  border-radius: 25px;
81}
82.sp-header-right{
83  display:none;
84}
85.top-warpper{
86  background-image:url(./img/b92898c297126cdae5b6c01585dd37c3_m.jpg);
87  background-size:cover;
88  width: 100%;
89  max-height:600px;
90}
91.top-message{
92  max-width: 380px;
93  margin: 0 auto;
94}
95

responsive.css
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>isara.制作LP模写</title>
6  <link rel="stylesheet" type="text/css" href="stylesheet.css">
7  <link rel="stylesheet" type="text/css" href="responsive.css">
8  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
9  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
10</head>
11<body>
12  <header>
13    <div class="header-warpper">
14      <div class="header-inner">
15        <div class="img-logo">
16          <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="">
17          <p>バンコクのノマドエンジニア育成講座</p>
18        </div>
19        <div class="header-right">
20          <a href="" class="header-btn">お問い合わせ / 資料請求はこちら</a>
21        </div>
22        <div class=sp-header-right>
23          <i class="fas fa-clipboard-list"></i>
24          <a href="" class="sp-header-btn">資料請求</a>
25        </div> 
26      </div>
27    </div>
28  </header>
29
30  <div class = "top-warpper">
31    <div class="top-message">
32      <h3>プログラミングで<br>
33          人生の安定を手にいれよう</h3>
34      <img class="top-logo">
35      <p>バンコクのノマドエンジニア育成講座<br>
36          iSara[イサラ]</p>    
37    </div>
38  </div>
39
40
41  <script src="script.js"></script>
42</body>
43

お手数をおかけしますがよろしくお願いいたします。

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

回答2件

ベストアンサー

position: fixed; の影響で他の要素がheaderと重なって見えなくなっています。
margin-top などで調整してください。

投稿2019/05/24 11:02

yasutomi

総合スコア2937

gomakasu423

2019/05/24 12:17

ご回答いただき誠にありがとうございます。＞margin-topなどで調整 ⇒margin-topにて調整をいたしました。調整個所は①隠れている要素に対して　②重なっている部分重なっていなう部分の要素全体　③隠れていない要素に対して　headerの高さ分margin-top pxといたしました。結果として　ヘッダー上部に余白ができることとなりました。以上、ご回答いただきありがとうございました。

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