Question

我正在尝试让div与Material Design中的默认NavBar重叠。我试过给我的div一个很高的Z指数，但没有运气。

你可以find a Plunker here。我的目标只是让绿色Box完全覆盖NavBar

CSS：

#overlay {
  background-color:green;
  height:200px;
  width: 100%;
  z-index:100;
  position: absolute;
  top: 0px;
}

HTML：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>

  <main class="mdl-layout__content">
    <div id="overlay">Overlay</div>
  </main>
</div>

</html>

在Material Design中创建HTML元素叠加导航栏

0 个答案: