Q&A
前提・実現したいこと
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件
0
ベストアンサー
footerに対してz-indexを指定してあげれば解決しそうですね。
footerよりも大きなz-indexがaタグに指定されているいずれかのクラスについていると思われるので、デベロッパーツール等でaタグのz-indexを調べてみるとよいかと思います。
投稿2019/10/14 03:13
総合スコア559
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/14 07:26