フッターの上にボタンが出てしまう（レイヤー・描画の順番が意図しているものと違う）

前提・実現したいこと

Materialize CSSを使って、ページを作成しています。スクロールをすると、テキスト部分はフッターの下（後ろ）に隠れるのですが、ボタンは上（前）になってしいます。

ボタンの部分もテキストと同様にフッターの後ろに隠れるようにしたいのです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8  <!--Import Google Icon Font-->
9  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
10  <!--Import materialize.css-->
11  <link rel="stylesheet" href="test.css">
12  <!-- Compiled and minified CSS -->
13  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
14  <!-- Compiled and minified JavaScript -->
15  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
16
17  <!--Let browser know website is optimized formobile-->
18  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19  <title>マテリアライズ シーエスエス</title>
20</head>
21
22<body>
23  <header>
24    <nav>
25      <div class="nav-wrapper">
26        <a href="#" class="brand-logo center"></i>マテリアライズ シーエスエス</a>
27      </div>
28    </nav>
29  </header>
30
31  <main>
32  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
33  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
34  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
35  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
36  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
37  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
38  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
39  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
40  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
41  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
42  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
43  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
44  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
45  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
46  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
47  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
48  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
49  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
50  <p>マテリアライズ シーエスエス <a class="btn-floating waves-effect waves-light blue"><i class="material-icons">add</i></a> </p>
51  </main>
52
53  <footer class="page-footer" style="position:fixed;bottom:0;left:0;width:100%;">
54    <div class="container">
55      <div class="row">
56        <div class="col l6 s12">
57          <h5 class="white-text">Footer Content</h5>
58          <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
59        </div>
60        <div class="col l4 offset-l2 s12">
61          <h5 class="white-text">Links</h5>
62          <ul>
63            <li><a class="grey-text text-lighten-3" href="#!">Link 1</a>
64              <li><a class="grey-text text-lighten-3" href="#!">Link 2</a>
65                <li><a class="grey-text text-lighten-3" href="#!">Link 3</a>
66                  <li><a class="grey-text text-lighten-3" href="#!">Link 4</a>
67          </ul>
68        </div>
69      </div>
70    </div>
71    <div class="footer-copyright">
72      <div class="container">
73        © 2014 Copyright Text
74      </div>
75    </div>
76  </footer>
77
78  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
79</body>
80
81</html>

css
1body {
2  display: flex;
3  min-height: 100vh;
4  flex-direction: column;
5}
6
7main {
8  flex: 1 0 auto;
9  padding-bottom: 240px; 
10}

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

Materialize CSS 1.0.0
Safari、Chrome、Firefox

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

回答1件

ベストアンサー

footerに対してz-indexを指定してあげれば解決しそうですね。
footerよりも大きなz-indexがaタグに指定されているいずれかのクラスについていると思われるので、デベロッパーツール等でaタグのz-indexを調べてみるとよいかと思います。

投稿2019/10/14 03:13

8zca

総合スコア559

NCC1701

2019/10/14 07:26

ありがとうございした。無事目的を達成しました。z-indexというプロパティがあることを学びました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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