如何在 MaterializeCSS 的阴影下移动元素？

Question

我正在使用 MaterializeCSS 构建一个简单的商店。该代码具有该站点的简单页面版本。我正在使用两个具有一些自定义属性的 sidenav，没有什么太复杂的。我希望导航栏阴影像图像中描述的那样覆盖到侧边栏上。

只有在按比例缩小时，阴影才会覆盖在侧边导航上。我不太确定这样做的最简单方法。这是页面的演示代码。它使用 materialize cdn，所以它应该只是运行.

<!DOCTYPE html>
    <html>
      <head>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!-- Website Title -->
        <title>Demo</title>
        <!-- Custom styles -->
        <style>
          /* Custom sizing for sidenav */
          .custom-sidenav {
            top: 64px;
          }
          @media only screen and (max-width : 600px) {
            .custom-sidenav {
              top: 0;
            }
          }
        </style>
      </head>
      <body>
        <!-- NavBar -->
        <header class="navbar-fixed">
          <nav>
            <div class="nav-wrapper">
              <a href="#" class="brand-logo center">The Store</a>
              <a href="#" data-target="sidenav-1" class="sidenav-trigger show-on-large brand-logo left"><i class="material-icons">menu</i></a>
              <a href="#" data-target="sidenav-2" class="sidenav-trigger show-on-large brand-logo right"><i class="material-icons">shopping_cart</i></a>
            </div>
          </nav>
        </header>
        <!-- Menu -->
        <aside>
          <ul id="sidenav-1" class="sidenav sidenav-fixed custom-sidenav">
            <li><a href="#">Menu Link 1</a></li>
            <li><a href="#">Menu Link 2</a></li>
            <li><a href="#">Menu Link 3</a></li>
            <li><a href="#">Menu Link 4</a></li>
          </ul>
        </aside>
        <!-- Shopping Cart -->
        <aside>
          <ul id="sidenav-2" class="sidenav sidenav-fixed custom-sidenav">
            <li><a href="#">Cart Link 1</a></li>
            <li><a href="#">Cart Link 2</a></li>
            <li><a href="#">Cart Link 3</a></li>
            <li><a href="#">Cart Link 4</a></li>
          </ul>
        </aside>
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        <!-- jQuery Inline-->
        <script>
          $(document).ready(function(){
            $('.sidenav').sidenav();
            $('#sidenav-1').sidenav({ edge: 'left' });
              $('#sidenav-2').sidenav({ edge: 'right' });
          });
        </script>
      </body>
    </html>

Answer 1

将规则 z-index 的值增加到 .navbar-fixed 将解决您的问题。将此规则放在 <style> 标记内：

.navbar-fixed {
    z-index: 1000;
}

要根据 Materialize 规则恢复到之前的索引值，请将 z-index 设置为 997 或 revert，在媒体查询中。像这样：

@media only screen and (max-width: 600px) {
    ...
    .navbar-fixed {
        z-index: 997;
    }
}

小艇：

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- Website Title -->
        <title>Demo</title>
        <!-- Custom styles -->
        <style>
            .navbar-fixed {
                z-index: 1000;
            }
            /* Custom sizing for sidenav */
            .custom-sidenav {
                top: 64px;
            }
            @media only screen and (max-width: 600px) {
                .custom-sidenav {
                    top: 0;
                }
                .navbar-fixed {
                    z-index: 997;
                }
            }
        </style>
    </head>
    <body>
        <!-- NavBar -->
        <header class="navbar-fixed">
            <nav>
                <div class="nav-wrapper">
                    <a href="#" class="brand-logo center">The Store</a>
                    <a href="#" data-target="sidenav-1" class="sidenav-trigger show-on-large brand-logo left"><i class="material-icons">menu</i></a>
                    <a href="#" data-target="sidenav-2" class="sidenav-trigger show-on-large brand-logo right"><i class="material-icons">shopping_cart</i></a>
                </div>
            </nav>
        </header>
        <!-- Menu -->
        <aside>
            <ul id="sidenav-1" class="sidenav sidenav-fixed custom-sidenav">
                <li><a href="#">Menu Link 1</a></li>
                <li><a href="#">Menu Link 2</a></li>
                <li><a href="#">Menu Link 3</a></li>
                <li><a href="#">Menu Link 4</a></li>
            </ul>
        </aside>
        <!-- Shopping Cart -->
        <aside>
            <ul id="sidenav-2" class="sidenav sidenav-fixed custom-sidenav">
                <li><a href="#">Cart Link 1</a></li>
                <li><a href="#">Cart Link 2</a></li>
                <li><a href="#">Cart Link 3</a></li>
                <li><a href="#">Cart Link 4</a></li>
            </ul>
        </aside>
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        <!-- jQuery Inline-->
        <script>
            $(document).ready(function () {
                $(".sidenav").sidenav();
                $("#sidenav-1").sidenav({ edge: "left" });
                $("#sidenav-2").sidenav({ edge: "right" });
            });
        </script>
    </body>
</html>

如何在 MaterializeCSS 的阴影下移动元素？

How to move element under a shadow in MaterializeCSS?

html

css

jquery

materialize