要素の不本意な重なりを解除したい

コード
```### 前提・実現したいこと

HTML, CSS, JavaScriptで模写をしています。 

### 発生している問題・エラーメッセージ
見出し画像の下に後続のブロックが重なってしまい、それを修正することが出来ません。
最初は大丈夫だったのですが、途中からこのような現象が起こってしまいました。
まだ初心者でコードはぐちゃぐちゃだと思うのですが、回答して頂ける方がいましたら、何卒宜しくお願い致します。

エラーメッセージ


### 該当のソース

``
HTML, javaScript
```HTML, JavaScript
<body>
<header>
    <div id="slideshow">
      <img src="./img/top01.jpg" alt="" class="active">
      <img src="./img/top02.jpg" alt="">
      <img src="./img/top03.jpg" alt="">
    </div>

    <!-- JS -->
    <script type="text/javascript">
    function slideSwitch() {
      var $active = $('#slideshow img.active');

      if ( $active.length == 0 ) $active = $('#slideshow img:last');

      var $next =  $active.next().length ? $active.next()
      : $('#slideshow img:first');

      $active.addClass('last-active');

      $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
      });
    }

    $(function() {
      setInterval( "slideSwitch()", 3000 );
    });
    </script>
    <!-- JS -->

    <nav id="header-nav">
      <h1>
        <a href="#" id="mark">
          <img src="./img/mark01.svg" height="50" alt="ニセコ白雲荘">
        </a>
      </h1>

      <ul id="header-list1">
        <li> <a href="#">お知らせ&nbsp;&nbsp;/</a> </li>
        <li> <a href="#">&nbsp;&nbsp;ご挨拶&nbsp;&nbsp;/</a> </li>
        <li> <a href="#">&nbsp;&nbsp;白雲荘について&nbsp;&nbsp;/</a> </li>
        <li> <a href="#">&nbsp;&nbsp;料金・サービス&nbsp;&nbsp;/</a> </li>
      </ul>

      <ul id="header-list2">
        <li> <a href="#">フォトギャラリー&nbsp;&nbsp;/</a> </li>
        <li> <a href="#">&nbsp;&nbsp;アクセス&nbsp;&nbsp;/</a> </li>
        <li> <a href="#">&nbsp;&nbsp;ニセコの紹介&nbsp;&nbsp;/</a> </li>
        <li> <a href="#">&nbsp;&nbsp;よくある質問&nbsp;&nbsp;/</a> </li>
        <li> <a href="#">&nbsp;&nbsp;宿泊規約</a> </li>
      </ul>
    </nav>

    <div class="aside">
      <ul>
        <li> <a href="#">JP</a> </li>
        <li> <a href="#">EN</a> </li>
      </ul>
      <p> <a href="#">RESERVATIONS</a> </p>
    </div>
<!-- 中央のマーク -->
<div id="centerLogo">
  <a href="#"> <img src="./img/centermark.svg" alt=""> </a>
</div>
<!-- 中央のマーク -->

<div class="rightDown">
  <a href="#">
    <p>
      Summer Season
    </p>
  </a>
</div>

<div class="centerDown">
  <a href="#"> <p>SCROLL</p> </a>
  <a href="#"> <img src="./img/triangle.svg" alt=""> </a>
</div>

</header>



<div id="silver">
  <div id="second">
    <section id="information">
      <a href="#">
        <h5>INFORMATON</h5>
        <figure>
          <img src="./img/arrow_black.svg" alt="" class="blackArrow01">
        </figure>
        <p class="infoMore">MORE</p>
      </a>
      <ul>
        <li>
          <p>
            08.20.2019&nbsp;&nbsp;
            <a href="#">2019-2020 Winter season 予約について </a>
          </p>
        </li>

        <li>
          <p>
            01.30.2019&nbsp;&nbsp;
            <a href="#"> 夏季合宿について</a>
          </p>
        </li>
        <li>
          <p>
            08.20.2018&nbsp;&nbsp;
            <a href="#"> 2018年-2019年冬季スタッフ募集 </a>
          </p>
        </li>
      </ul>

    </section>

    <section id="instagram">
      <a href="#">
        <h5>INSTAGRAM</h5>
        <figure>
          <img src="./img/arrow_black.svg" alt="" class="blackArrow02">
        </figure>
        <p class="instaMore">MORE</p>
      </a>
      <div id="instaPhoto">
        <ul>
          <li> <a href="#">
            <figure>
              <img src="./img/insta01.jpg" alt="">
            </figure>
          </a> </li>
          <li> <a href="#">
            <figure>
              <img src="./img/insta02.jpg" alt="">
            </figure>
          </a> </li>
          <li> <a href="#">
            <figure>
              <img src="./img/insta03.jpg" alt="">
            </figure>
          </a> </li>
          <li> <a href="#">
            <figure>
              <img src="./img/insta04.jpg" alt="">
            </figure>
          </a> </li>
          <li> <a href="#">
            <figure>
              <img src="./img/insta05.jpg" alt="">
            </figure>
          </a> </li>
          <li> <a href="#">
            <figure>
              <img src="./img/insta06.jpg" alt="">
            </figure>
          </a> </li>
        </ul>
      </div>
    </section>
  </div>

  <section id="third">
    <a href="#"> <img src="./img/staff01.jpg" alt=""> </a>
  </section>
</div>

CSS
1
2header {
3  position: relative;
4}
5
6a {
7  text-decoration: none;
8}
9#header-nav #mark{
10  position: absolute;
11  top: 20px;
12  left: 40px;
13  z-index: 50;
14}
15
16#header-list1 a, #header-list2 a {
17  text-decoration: none;
18  color: white;
19}
20
21#header-list1 {
22  display: flex;
23  justify-content: space-around;
24  position: absolute;
25  top: 20px;
26  left: 150px;
27  z-index: 20;
28}
29
30#header-list2 {
31  display: flex;
32  justify-content: space-around;
33  position: absolute;
34  top: 45px;
35  left: 150px;
36  padding-top: 5px;
37  z-index: 20;
38}
39
40.aside ul {
41  z-index: 20;
42  display: flex;
43  justify-content: space-around;
44  position: absolute;
45  top: 25px;
46  right: 250px;
47}
48
49.aside ul li:first-child {
50  margin: 0 5px;
51  padding: 10px;
52  border: medium solid #C1A250;
53}
54
55.aside ul li:last-child {
56  margin: 0 5px;
57  padding: 10px;
58  border: medium solid rgba(rgba(213, 217, 47, 0));
59}
60
61.aside p {
62  z-index: 20;
63  position: absolute;
64  top: 5px;
65  right: 30px;
66  text-align: center;
67  background: #C1A250;
68  width: 15%;
69  min-height: 50px;
70  line-height: 50px;
71}
72
73.aside li {
74  display: inline-block;
75}
76
77.aside a {
78  text-decoration: none;
79  color: white;
80}
81
82.rightDown {
83  position: absolute;
84  bottom: 5%;
85  right: 0;
86  z-index: 20;
87  background: rgb(249, 249, 249);
88  width: 13.5%;
89  height: 5%;
90  text-align: center;
91  line-height: 3px;
92}
93
94.rightDown a {
95  text-decoration: none;
96}
97
98.rightDown p {
99  color: #626F7F;
100}
101
102.centerDown a {
103  text-decoration: none;
104}
105
106.centerDown p {
107  position: absolute;
108  left: 47%;
109  bottom: 8%;
110  z-index: 40;
111}
112
113.centerDown img {
114  position: absolute;
115  width: 25px;
116  height: 25px;
117  left: 49%;
118  bottom: 3%;
119  z-index: 40;
120}
121
122/* コピーしたやつ */
123#slideshow {
124   position: relative;
125   /* width:  1263px;  */
126   /* 画像の横幅に合わせて記述 */
127   /* height: 660px; */
128    /* 画像の高さに合わせて記述 */
129    width: 1263px;
130  	height: auto;
131    }
132
133#slideshow img {
134   position: absolute;
135   top: 0;
136   left:0;
137   z-index: 8;
138   opacity: 0.0;
139   width: 100%;
140}
141
142#slideshow img.active {
143   z-index: 10;
144   opacity: 1.0;
145}
146
147#slideshow img.last-active {
148   z-index: 9;
149}
150
151/* コピーしたやつ */
152
153/* <!-- 中央のマーク --> */
154#centerLogo img{
155  z-index: 999;
156  position: absolute;
157  top: 50%;
158  left: 50%;
159  -webkit-transform: translate(-50%, -50%);
160  transform: translate(-50%, -50%);
161  width: 40%;
162  height: 40%;
163}
164
165/* <!-- 中央のマーク --> */
166
167#silver {
168  background-color: #EAEBED;
169  padding-bottom: 30px;
170  }
171
172#second {
173  width: 100%;
174}
175
176#information {
177  position: relative;
178  width: 50%
179}
180
181#information h5 {
182  color: #C1A250;
183  position: absolute;
184  top: 25px;
185  left: 90px;
186}
187
188.blackArrow01 {
189  position: absolute;
190  top: 20px;
191  left: 220px;
192  width: 20px;
193  height: 20px;
194}
195
196.infoMore {
197  position: absolute;
198  top: 10px;
199  left: 260px;
200  font-size: 12px;
201}
202
203#second p {
204  color: #626F7F;
205}
206
207#information ul {
208  position: absolute;
209  top: 50px;
210  left: 90px;
211}
212
213#instagram {
214  width: 50%;
215  position: relative;
216}
217
218
219#instagram h5 {
220  color: #C1A250;
221  position: absolute;
222  top: 25px;
223  right: -16%;
224}
225
226.blackArrow02 {
227  position: absolute;
228  top: 20px;
229  right: -140px;
230  width: 20px;
231  height: 20px;
232}
233
234.instaMore {
235  position: absolute;
236  top: 10px;
237  right: -200px;
238  font-size: 12px;
239}
240
241#instaPhoto ul{
242  display: flex;
243  justify-content: space-around;
244}
245
246
247#instaPhoto img{
248  width : 250%;
249  height: 250%;
250}
251
252
253#third img {
254  margin-top: 200px;
255}
256
257
258/* staff */
259#third {
260  text-align: center;
261}
262
263
264/* staff */
265


### 試したこと
position: relative;
position: absolute;
との関係を見直したり
display: block;
にしてみたのですが上手く反映されませんでした。

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

hatena19

2020/01/02 04:07

コードはマークダウン記法のコードブロック内にいれてください。あるいはコード部分を選択してツールバーの <code> ボタンをクリックする。

takuhito_hihara

2020/01/02 23:31

一旦、このようにしてcodepenを使ってコードをアップロードしてもらえると、答えやすいですね。 https://codepen.io/takuhito-h/pen/JjoOKqo 気が向いたらお願いします。

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

回答1件

ベストアンサー

重なる原因は、position: absolute; で重なるように設定しているからです。
最終的にどのようなレイアウトが希望なのか不明なので、
とりあえず、position: absolute;をすべて削除してから、position: relative;とposition: absolute;の意味と関係を理解して、適切な箇所にposition: relative;とposition: absolute;を設定しなおしてください。

「CSS position: absolute」で検索すると解説ページがいろいろ見つかりますので、まずはそこで理解を深めてから取り組んでください。

例えば、
CSSのposition: absoluteとrelativeとは | UX MILK

投稿2020/01/03 04:19

hatena19

総合スコア33699