position:relative,absoluteについて

宜しくお願い致します。

ある飲料水メーカーのサイトを同じように作っているのですが、
HTML下部の
「 <div class="logo-text"><img>～</div>」
の部分がどうしても画面の一番上に（浮き上がって？）移動してしまいます。

たぶん自分がposition:relative,absoluteの関係を理解できていないからだと思うのですが、
HTML通りに画面の一番下に表示されるようにするにはどこを修正すれば宜しいでしょうか？

長くてすみませんが、分かる方いましたら教えて頂けると幸いです。
宜しくお願い致します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="keywords" content="">
6<meta name="description" content="">
7<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8
9<link rel="stylesheet" href="jquery.bxslider.min.css">    
10<link rel="stylesheet" href="style.css">
11    <link rel="stylesheet" href="jquery-ui.css"> 
12    <link rel="stylesheet" href="amazonmenu.css">
13    
14<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
15    <script type="text/javascript" src="fade-slide.js"></script>
16    <script type="text/javascript" src="jquery.bxslider.min.js"></script>
17    <script type="text/javascript" src="jquery-ui.js"></script>
18     <script type="text/javascript" src="script.js"></script>
19     <script type="text/javascript" src="amazonmenu.js"></script>
20
21    </head>
22<body>
23  <div class="slide-wrapper">
24    <div id="slide">
25      <ul>
26        <li>
27          <a href="">
28            <img src="https://pocarisweat.jp/images/home_img_slider_03_pc.jpg" alt="" height="300" class="imagese"/>
29          </a>
30          <div class="slide-01">
31            <div class="slide-image01">
32              <img src="https://pocarisweat.jp/images/home_btn_main_05.png">
33            </div>
34            <div class="slide-image02">
35              <img src="https://pocarisweat.jp/images/home_img_slider_05Txt_pc.png">
36            </div>
37          </div>
38        </li>
39        <li>
40          <a href="">
41            <img src="https://pocarisweat.jp/images/home_img_slider_05_pc.jpg" alt="" height="300"class="imagese"/>
42          </a>
43          <div class="slide-02">
44            <img src="https://pocarisweat.jp/images/home_btn_main_03.png">
45          </div>
46        </li>
47      </ul>
48    </div>
49    <div class="slide-banner">
50      <div class="slide-left">
51        <img src="https://pocarisweat.jp/shared/images/header_logo_01.gif">
52      </div>
53      <div class="slide-right">
54        <ul>
55          <li>
56            <a href="#">製品情報</a>
57          </li>
58          <li class="pokari">
59            <a href="#">製品情報</a>
60          </li>
61          <li>
62            <a href="#">製品情報</a>
63          </li>
64          <li>
65            <a href="#">製品情報</a>
66          </li>
67          <li>
68            <a href="#">製品情報</a>
69          </li>
70          <li>
71            <a href="#">製品情報</a>
72          </li>
73          <li>
74            <a href="#">製品情報</a>
75          </li>
76        </ul>
77      </div>
78      <div class="banner-blue">
79        <div class="banner-text">
80          <p>NEWS</p>
81          <span>2018/07/07</span>
82          <span>新CM　「ポカリスエットダンスFES編」を公開しました</span>
83        </div>
84      </div>
85      <div class="center">
86        <img src="https://pocarisweat.jp/images/home_btn_main_arw_01.png">
87      </div>
88    </div>
89  </div>
90  <div class="logo-text">
91    <img src="https://pocarisweat.jp/images/home_ttl_01.gif">
92  </div>
93</body>
94</html>

CSS
1@charset "UTF-8";
2body {
3  font-size: 14px;
4  font-family: "Lato", "YuGothic", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
5  text-align: center;
6  background-color: #f4f4f4;
7  color: #2a1e02;
8}
9
10* {
11  margin: 0;
12  padding: 0;
13}
14
15ul li {
16  list-style: none;
17}
18
19#slide {
20  width: 100%;
21  height: 100%;
22  margin: 0 auto;
23  position: relative;
24}
25
26#slide .imagese {
27  position: relative;
28  width: 100%;
29  height: 100%;
30  left: 0;
31  top: 0;
32}
33
34.slide-01 {
35  position: absolute;
36  top: 200px;
37  left: 100px;
38  width: 1200px;
39}
40
41.slide-image01 {
42  width: 215px;
43  left: 200px;
44  position: relative;
45}
46
47.slide-image02 {
48  width: 215px;
49  position: relative;
50  float: right;
51}
52
53.slide-02 {
54  position: absolute;
55  height: 300px;
56  right: 0;
57  top: 100px;
58}
59
60.slide-02 img {
61  position: relative;
62  top: 100px;
63  right: 100px;
64  width: 300px;
65  height: 80px;
66}
67
68.slide-banner {
69  position: absolute;
70  bottom: 200px;
71  left: 0;
72  width: 100%;
73}
74
75.slide-banner ul li {
76  float: left;
77}
78
79.slide-left {
80  float: left;
81  width: 30%;
82  padding-top: 10px;
83  background-color: #015db2;
84}
85
86.slide-right {
87  float: left;
88  background-color: white;
89  width: 70%;
90}
91
92.slide-right ul li {
93  text-indent: -9999px;
94  background-image: url('https://pocarisweat.jp/shared/images/header_gnav_pc_01.gif');
95  width: 120px;
96  height: 80px;
97}
98
99li.pokari {
100  background-image: url('https://pocarisweat.jp/shared/images/header_gnav_pc_01.gif');
101  background-position: 18% 0;
102}
103
104.banner-blue p {
105  display: inline-block;
106}
107
108.banner-blue {
109  background-color: rgba(5, 33, 92, 0.8);
110  height: 120px;
111  color: white;
112}
113
114.slide-banner::after {
115  clear: both;
116  display: block;
117  content: '';
118  height: 0;
119}
120
121.banner-text {
122  margin-left: -180px;
123}
124
125.center img {
126  padding-top: 20px;
127}
128

macaron_xxx

2018/07/17 08:51

インデントを整理してください。

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

回答1件

ベストアンサー

パッと見で回答失礼します。

relative と　absolute　が　親子逆についているのではないでしょうか？

例えばこの部分

html
1 <div class="slide-01">
2            <div class="slide-image01">
3              <img src="https://pocarisweat.jp/images/home_btn_main_05.png">
4            </div>
5            <div class="slide-image02">
6              <img src="https://pocarisweat.jp/images/home_img_slider_05Txt_pc.png">
7            </div>
8 </div>

質問者様はこのように親にabsolute、子にrelativeを当てていますが

css
1.slide-01 {/*親*/
2  position: absolute;
3  top: 200px;
4  left: 100px;
5  width: 1200px;
6}
7
8.slide-image01 {/*子*/
9  width: 215px;
10  left: 200px;
11  position: relative;
12}

こうだと思います。親にrelative、子にabsolute

css
1.slide-01 {/*親*/
2  position: relative;
3  width: 1200px;
4}
5
6.slide-image01 {/*子*/
7  position:absolute;
8  width: 215px;
9  left: 200px;
10  top: 200px;
11}