2つのdiv要素が重なり合ってしまう

現在、Materializeを使用してHTMLページを作成しています。

しかし2つのdiv要素（<div class="slider fullscreen">と<div class="parallaxes">）が重なり合ってしまい、<div class="parallaxes">の上部分が見えない状態です。

<div class="slider">の状態ではこのようなことが起こらないのですが、divのclass属性にfullscreenを持たせると被ってしまうという状態です。 <div class="slider fullscreen">の高さが反映？されていないことが原因かと思うのですが、解決策がわからず相談しました。

以下にコードを記載しますので、解決策を教えてください。

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <!--MaterializeCSS-->
6    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
8    <!--Google Web Font-->
9    <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
10    <!--CSS-->
11    <link rel="stylesheet" href="css/styles.css" type="text/css" />
12    <title>invoice&todo</title>
13  </head>
14  <body>
15    <nav class="navbar">
16      <div class="nav-wrapper">
17        <a href="#" class="brand-logo right"><i class="material-icons">check_circle</i>Invoice&ToDo</a>
18        <ul id="nav-mobile" class="left">
19          <li><a href="">無料会員登録</a></li>
20          <li><a href="">ログイン</a></li>
21          <li><a href="">お問い合わせ</a></li>
22        </ul>
23      </div>
24    </nav>
25         <div class="slider fullscreen">
26      <ul class="slides">
27        <li>
28          <img src="img/top1.png">
29          <div class="caption center-align">
30            <h3 class="red-text text-accent-1">案件管理</h3>
31            <h5 class="red-text text-accent-1">クライアントごとに案件が管理できます</h5>
32          </div>
33        </li>
34        <li>
35          <img src="img/top2.png">
36          <div class="caption left-align">
37            <h3 class="red-text text-accent-1">請求書作成</h3>
38            <h5 class="red-text text-accent-1">完了した案件はそのまま請求書に自動記載</h5>
39          </div>
40        </li>
41        <li>
42          <img src="img/top3.jpg">
43          <div class="caption right-align">
44            <h3 class="blue-text text-accent-4">カレンダーで案件管理</h3>
45            <h5 class="blue-text text-accent-4">カレンダーで案件スケジュールを一括閲覧</h5>
46          </div>
47        </li>
48        <li>
49          <img src="img/top4.jpg">
50          <div class="caption center-align">
51            <h3 class="green-text text-darken-1">無料で利用可能</h3>
52            <h5 class="green-text text-darken-1">全てのサービスが無料で利用できます</h5>
53          </div>
54        </li>
55      </ul>
56    </div>
57    <a href="#!" class="btn-large waves-effect waves-red startBtn">Sign Up</a>
58         <!--Parallaxここから-->
59    <div class="parallaxes">
60      <div class="section white">
61        <div class="row container">
62          <h2 class="header">Todo</h2>
63          <p class="grey-text text-darken-3 lighten-3">ライティングの案件をクライアントごとに管理できます。ライティングの案件をクライアントごとに管理できます。ライティングの案件をクライアントごとに管理できます。ライティングの案件をクライアントごとに管理できます。</p>
64        </div>
65      </div>
66      <div class="parallax-container">
67        <div class="parallax"><img src="img/writing.jpg">
68        <a href="#!" class="btn-large waves-effect waves-red startBtn">Sign Up</a>
69        </div>
70      </div>
71             <div class="section white">
72        <div class="row container">
73          <h2 class="header">Invoice</h2>
74          <p class="grey-text text-darken-3 lighten-3">完了した案件はそのまま請求書に自動記載できます。自ら請求書に書き込む手間が省けます。完了した案件はそのまま請求書に自動記載できます。自ら請求書に書き込む手間が省けます。完了した案件はそのまま請求書に自動記載できます。</p>
75        </div>
76      </div>
77      <div class="parallax-container">
78        <div class="parallax"><img src="img/invoice.jpg"></div>
79      </div>
80    </div>
81    <!--Parallaxここまで-->
82         <!--利用者の声-->
83  <div class="row">
84    <div class="row container">
85      <h2 class="header">Customer Voice</h2>
86      <p class="grey-text text-darken-3 lighten-3">多くの利用者の方にご利用いただいています。多くの利用者の方にご利用いただいています。多くの利用者の方にご利用いただいています。多くの利用者の方にご利用いただいています。多くの利用者の方にご利用いただいています。</p>
87    </div>
88    <div class="col s4 m4">
89      <div class="card">
90        <div class="card-image">
91          <img src="img/person3.jpg">
92        </div>
93        <div class="card-content">
94          <p>I am a very simple card. I am good at containing small bits of information.
95          I am convenient because I require little markup to use effectively.</p>
96        </div>
97      </div>
98    </div>
99    <div class="col s4 m4">
100      <div class="card">
101        <div class="card-image">
102          <img src="img/person2.jpg">
103        </div>
104        <div class="card-content">
105          <p>I am a very simple card. I am good at containing small bits of information.
106          I am convenient because I require little markup to use effectively.</p>
107        </div>
108      </div>
109    </div>
110    <div class="col s4 m4">
111      <div class="card">
112        <div class="card-image">
113          <img src="img/person1.jpg">
114        </div>
115        <div class="card-content">
116          <p>I am a very simple card. I am good at containing small bits of information.
117          I am convenient because I require little markup to use effectively.</p>
118        </div>
119      </div>
120    </div>
121  </div>
122     <!--MaterializeJS読み込み-->
123<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
124<!--SliderJS読み込み-->
125<script>
126  const slide = document.querySelector('.slider');
127  M.Slider.init(slide,{});
128</script>
129<!--ParallaxJS読み込み-->
130<script>
131    const para = document.querySelectorAll('.parallax');
132    M.Parallax.init(para,{});
133</script>
134  </body>
135</html>

css
1body{
2  font-family: 'Kosugi Maru', sans-serif;
3}
4  .tab_item {
5  display: none;
6}
7 .is-active-item {
8  display: block;
9}
10 /*サイドバー用のCSS*/
11header, main, footer {
12  padding-left: 300px;
13}
14 .header h2{
15  margin:0;
16  line-height: 100px;
17}
18 .header{
19  height: 100px;
20}
21 /*navbar固定ここから*/
22.navbar{
23  position: fixed;
24  opacity:0.8;
25  z-index: 10;
26}
27.nav-wrapper{
28  z-index:1;
29}
30 .startBtn{
31  z-index:5;
32}
33/*navbar固定ここまで*/
34 .startBtn{
35  position:relative;
36  top:-50px;
37  left:20px;
38}
39 .card-image img{
40  height:40%;
41}
42 @media only screen and (max-width : 992px) {
43 .parallax-container .section {
44  position: absolute;
45  top: 50;
46  }
47}
48 @media only screen and (min-width: 601px) {
49  a.sidenav-trigger{
50    height: 64px;
51    width: 64px;
52    line-height: 64px;
53  }
54}

yoshinavi

2019/06/11 07:42

＞重なり合ってしまい、<div class="parallaxes">の上部分が見えない状態です。 →　「margin-top」等設定されてみてはどうですか？

HirakuMorishima

2019/06/11 22:49

margin-topですとレスポンシブ対応にするために細かい値の指定が必要かと思われます。上のdivにposition:abusolute;が効いている場合、2つ目のdivとの重なりを解消するためには margin-topを使用するしか解決策はないのでしょうか？

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

回答2件

ベストアンサー

materialize.min.cssの

css
1.slider.fullscreen {
2    height: 100%;
3    width: 100%;
4    position: absolute;
5    top: 0;
6    left: 0;
7    right: 0;
8    bottom: 0;
9}

によりposition: absoluteされているため、この要素が通常フローから外れ、それ以降の要素はこの要素がない場合と同じ配置になります（つまり.startBtn要素以降が.slider.fullscreenに隠れてしまいます）。ご提示のHTMLでのhtml > body > .slider.fullscreen要素はウィンドウと同じ高さをもつようになっていますので、

css
1.startBtn {
2  margin-top: 100vh;
3}

でウィンドウの高さ分だけmargin-topをもたせてみてください。

別の解決策

MaterializeのフルスクリーンスライダーのデモでCSSをいじってみる限り、

css
1.slider.fullscreen {
2  height: 100vh !important;
3  position: relative !important;
4}

を追加してフルスクリーンスライダーのCSSを上書きしてもスライダーは表示できているように見えますので、こちらでもいいかもしれません。

投稿2019/06/12 00:37

YukiYamashina

総合スコア1011

HirakuMorishima

2019/06/12 10:53

ありがとうございます！恥ずかしながら「vh」という単位がCSSに存在することを知りませんでした。今後、abusoluteに対してはvhを使用していきたいと思います。

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

高さの優先順位が
.slider < .fullscreen
と、なってしまっているようです。

独自CSS側で、高さを追加してあげるといいですよ。

あとこれらを見るときは、ブラウザなどのデバッガーを使って要素を選択してあげると、
style というところに、現在あたっているstyle が表示され、表示順が優先度順です。
チェックを外すことで、どうなるのか確認できます。
デバッガー使いこなしたらもう少し楽にコーディング出来ると思いますよ。
★調べてみてください(^^)

頑張ってみてください！

投稿2019/06/11 01:56