文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在MaterializeCSS中的阴影下移动元素？

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

Stack Overflow用户

提问于 2021-05-07 00:28:39

回答 1查看 60关注 0票数 1

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

只有当阴影被缩小时，阴影才应该被覆盖在侧边。我不太确定做这件事最简单的方法。这是页面的演示代码。它使用物化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>

html

jquery

css

materialize

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-07 01:34:01

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

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

若要根据物化规则恢复到以前的索引值，请在媒体查询中将z-index设置为997或rules。如下所示：

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

Shippet:

<!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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67427554

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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