footerが変なところに回り込んでしまう。

footerのレイアウトがうまくいきません。
'#sponsorの親要素である#mainはfooterと姉妹要素なので、順番的に重なることはないと思っているのですが、footerが#sponsorの少し上のあたりに配置されてしまいます。

html
1    <body>
2      <nav>
3        <h1><a href=""><span>KEI</span><span> NISHIKORI</span><span>.COM</span></a></h1>
4        <ul>
5          <li><a href="">ブログ</a></li>
6          <li><a href="">試合結果</a></li>
7          <li><a href="">公式アプリ</a></li>
8        </ul>
9      </nav>
10      <div id="top">
11        <div id="slideshow">
12          <img src="img/kei1.jpg" alt="kei1" class="active">
13          <img src="img/kei2.jpg" alt="kei2">
14          <img src="img/kei3.jpg" alt="kei3">
15          <img src="img/kei4.jpg" alt="kei4">
16        </div>
17        <div class="rank">
18          <p>ATP RANKING<span style="font-size: 50px;font-weight: 900;color: #0f5"> 5</span></p>
19          <p>Kei NISHIKORI<span style="font-size: 12px">OFFICIAL WEBSITE</span></p>
20        </div>
21      </div>
22      <div id="main">
23        <div class="news">
24          <div class="h2">
25            <h2>WHAT'S NEWS</h2> 
26          </div>
27          <div class="newsBox">
28            <div class="newsBox-1 newsB">
29              <a href="">
30                <div class="img-b">
31                  <img src="img/news.kei1.jpg">
32                  <h3>FROM KEI<br>2018.10.10</h3>
33                </div>
34                <p>【お知らせ】インタビュー（２回戦終了後）/男子テニスATPワールドツアー　マスターズ1000　上海</p>
35                <p>大会第4日、2回戦 ウー・イービンとの戦いに勝利した錦織選手のインタビュー。※日本語は後半部分となります▶錦織圭 インタビュー(2回戦終了後)／男子テニスATPワールドツアー マスターズ1000 上海今すぐ動画をチェック！⇒</p>
36              </a>
37            </div>
38            <div class="newsBox-2 newsB">
39              <a href="">
40                <div class="img-b">
41                  <div class="img-box"></div>
42                  <h3>RESULT</h3>
43                </div>
44                <p>上海　ロレックス・マスターズ</p>
45                <p>準決勝ロジャー・フェデラー（スイス）</p>
46              </a>
47            </div>
48            <div class="newsBox-3 newsB">
49              <a href="">
50                <div class="img-b">
51                  <img src="img/news.kei3.jpg">
52                  <h3>FROM KEI<br>2018.10.06</h3>
53                </div>
54                <p>【お知らせ】インタビュー（準決勝直後オンコート）/楽天ジャパンオープンテニス2018</p>
55                <p>大会第6日、準決勝に勝利し、同大会で4年ぶりの決勝進出を決めた錦織選手の試合直後のインタビュー！難敵リシャール・ガスケ選手との戦いを振り返るとともに、ダブルスに出場している内山選手へエールを送りました。▶錦織圭 インタビュー(準決勝直後オンコート)／楽天ジャパンオープンテニス2018動画をチェック！⇒</p>
56              </a>
57            </div>
58            <div  class="newsBox-4 newsB">
59              <a href="">
60                <div class="img-b">
61                  <img src="img/news.kei4.jpg">
62                  <h3>FROM KEI<br>2018.10.06</h3>
63                </div>
64                <p>【お知らせ】インタビュー（準々決勝直後オンコート）/楽天ジャパンオープンテニス2018</p>
65                <p>大会第5日、準々決勝に勝利し、ベスト4進出を決めた錦織選手の試合直後のインタビュー！期待の若手、ステファノス・チチパス選手をストレートで下した、「いいテニスができていた」戦いを振り返りました。▶錦織圭 インタビュー(準々決勝直後オンコート)／楽天ジャパンオープンテニス2018今すぐ動画をチェック！⇒</p>
66              </a>
67            </div>
68            <div class="newsBox-5 newsB">
69              <a href="">
70                <div class="img-b">
71                  <img src="img/news.kei5.jpg">
72                  <h3>FROM KEI<br>2018.10.04</h3>
73                </div>
74                <p>【お知らせ】インタビュー（2回戦直後オンコート）/楽天ジャパンオープンテニス2018</p>
75                <p>大会第3日、2回戦に勝利した錦織選手の試合直後のインタビュー！「出だしはむちゃくちゃ良かった」というブノワ・ペール選手との戦いを振り返りました。▶錦織圭 インタビュー(2回戦直後オンコート)／楽天ジャパンオープンテニス2018今すぐ動画をチェック！⇒</p>
76              </a>
77            </div>
78            <div class="newsBox-6 newsB">
79              <a href="">
80                <div class="img-b">
81                  <img src="img/news.kei6.jpg">
82                  <h3>FROM KEI<br>2018.10.02</h3>
83                </div>
84                <p>【お知らせ】インタビュー（2回戦直後オンコート）/楽天ジャパンオープンテニス2018</p>
85                <p>大会第1日、1回戦に勝利した錦織選手の試合直後のインタビュー！杉田祐一選手との戦いを振り返りました。▶錦織圭 インタビュー(1回戦直後オンコート)／楽天ジャパンオープンテニス2018今すぐ動画をチェック！⇒</p>
86              </a>
87            </div>
88          </div>
89          <div class="links">
90            <div class="link-1 link">
91              ブログを読む
92            </div>
93            <div class="link-2 link">
94              試合結果を見る
95            </div>
96          </div>
97        </div>
98        <div class="sponsor">
99          <div class="h2">
100            <h2>SPONSER</h2>
101            <div class="">
102              <img src="img/sponsor/nissin.png">
103              <img src="img/sponsor/jal.png">
104              <img src="img/sponsor/lixil.png">
105              <img src="img/sponsor/nike.png">
106              <img src="img/sponsor/ntt.png">
107              <img src="img/sponsor/uniqlo.png">
108              <img src="img/sponsor/weider.png">
109              <img src="img/sponsor/wilson.png">
110              <img src="img/sponsor/wowow.jpg">
111            </div>
112          </div>
113        </div>
114      </div>
115      <footer>
116        <div class="tyosaku">
117          <div>&copy;2018 KEI NISHIKORI</div>
118          <div>当サイトの画像は著作権により保護されています。画像の無断コピー、無断使用は禁止します。</div>
119        </div>
120      </footer>
121      <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
122      <script src="main.js"></script>
123    </body>

css
1body {
2  margin: 0;
3  padding: 0;
4  font-size: 14px;
5}
6
7a {
8  text-decoration: none;
9  color: #000;
10}
11
12nav a {
13  color: #fff;
14}
15
16nav {
17  position: fixed;
18  display: flex;
19  width: 100%;
20  height: 68px;
21  z-index: 2;
22  background-color: #000;
23  color: #fff;
24  background: -moz-linear-gradient(top, #000, transparent);
25  background: -webkit-linear-gradient(top, #000, transparent);
26  background: linear-gradient(to bottom, #000, transparent);
27}
28
29h1 {
30  margin: 0 0 0 20px;
31  height: 68px;
32  line-height: 68px;
33  font-size: 30px;
34  font-weight: 100;
35}
36
37h1 span:first-child {
38  color: #0f5;
39}
40
41h1 span:nth-child(2) {
42  color: #fff;
43}
44
45h1 span:last-child {
46  color: #888;
47}
48
49nav ul {
50  display: flex;
51  margin: 0;
52  padding: 0;
53  position: absolute;
54  right: 0;
55}
56
57nav ul li {
58  list-style: none;
59  margin: 0 20px;
60  line-height: 68px;
61}
62
63#slideshow {
64  position: fixed;
65  width: 100%; /* 画像の横幅に合わせて記述 */
66  height: 700px; /* 画像の高さに合わせて記述 */
67  overflow: hidden;
68}
69#slideshow img {
70  width: 100%;
71  height: auto;
72  position: absolute;
73  top: 0;
74  left:0;
75  z-index: 1;
76  opacity: 0.0;
77}
78#slideshow img.active {
79  z-index: 3;
80  opacity: 1.0;
81}
82#slideshow img.last-active {
83  z-index: 2;
84}
85
86.rank {
87  font-size: 20px;
88  font-weight: 900;
89  color: #fff;
90  position: absolute;
91  top: 50%;
92  left: 5%;
93}
94
95.rank p:first-child {
96  border-bottom: dotted 1px #ccc;
97}
98
99#main {
100  position: relative;
101  top: 500px;
102  background-color: #eee;
103  z-index: 1;
104}
105
106h2 {
107  display: inline-block;
108  padding-bottom: 10px;
109  border-bottom: solid 2px #000;
110}
111
112.h2 {
113  text-align: center;
114}
115
116.newsB {
117  width: 500px;
118  height: 500px;
119  background-color: #fff;
120}
121
122.img-box {
123  /*content: '';*/
124  width: 500px;
125  height: 306px;
126  background-color: #0f5;
127}
128
129.img-b {
130  position: relative;
131}
132
133.img-b img {
134  vertical-align: bottom;
135}
136
137.img-b:before {
138  content: '';
139  width: 500px;
140  height: 306px;
141  background: rgb(0,0,0,0.5);
142  position: absolute;
143  top: 0;
144  left: 0;
145}
146
147.newsBox-2 .img-b:before {
148  background: rgb(0,0,0,0.0);
149}
150
151h3 {
152  position: absolute;
153  top: 50%;
154  left: 50%;
155  color: #fff;
156}
157
158.newsB a p:nth-child(2) {
159  font-weight: 800;
160}
161
162.newsB a p:last-child {
163  overflow: hidden;
164}
165
166.link {
167  content: '';
168  width: 500px;
169  height: 170px;
170  background-color: #fff;
171}
172
173.link:hover {
174  background-color: #0f5;
175}
176
177.sponsor {
178  position: relative;
179  background-color: #fff;
180}
181
182footer {
183  position: relative;
184  width: 100%;
185  height: 200px;
186  text-align: center;
187  background-color: #000;
188  color: #0f5;
189  font-size: 18px;
190  z-index: 1;
191}
192
193.tyosaku {
194  padding: 30px;
195}
196
197.tyosaku div:last-child {
198  color: #555;
199  font-size: 12px;
200}

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

回答1件

ベストアンサー

CSS
1#main {
2	position: relative;
3	top: 500px;/*←これのせい。上に空間が作りたいのであればpaddingで。*/
4	background-color: #eee;
5	z-index: 1;
6}

投稿2018/10/27 09:43

kei344

総合スコア69407

tunnel

2018/10/27 09:59

topが原因だったんですね。しかしpaddingにしてしまうと下の層にあるslideshowが隠れてしまいます。

kei344

2018/10/27 10:05

じゃ、top: 500px;を消した上で #top{height: 500px;}で。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

footerが変なところに回り込んでしまう。

関連した質問