导航中的物化下拉菜单位于元素后面

Question

我知道有人问过这类问题，我复习了一遍，但无法解决我的问题。 在我使用物化的页面中，我有一个带有下拉按钮的导航栏，但是每当我打开它时，它都会位于另一个元素的后面。我附上它的图像 I am attaching a image of it.

我在小提琴中也遇到过类似的问题，

https://jsfiddle.net/Illuminator0/pugy1j5b/10/

 <ul id='dropdown1' class='dropdown-content'>
  <li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>

<nav>
  <div id="nav-wrapper">
    <ul class=" brand-logo center">
      <li>
        <a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
      </li>
    </ul>
  </div>
</nav>

<div class="row">
  <div class="col s12 m6">
    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <span class="card-title">Card Title</span>
        <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
        <a href="#">This is a link</a>
      </div>
    </div>
  </div>
</div>

我将不胜感激。

Answer 1

我使用上面的解决方案解决了这个问题，这里有一个fiddle它

CSS 代码

.dropdown-content {
  overflow-y: auto;
  position: relative;
  z-index: 1000;
}

.dropdown-content .dropdown-content {
  margin-left: 100%;
  position: relative;
    z-index: 1000;
}

.nav-wrapper {
  overflow-y: auto;
  position: relative;
}

.card {
  overflow: visible;
  position: relative;
}
nav {
  position: relative;
  z-index: 9999;
}

Answer 2

这是我在 .card 类中添加 "z-index-1" 的解决方案

.dropdown-content {
  overflow-y: auto;
  position: relative;
  z-index: 1000;
}

.dropdown-content .dropdown-content {
  margin-left: 100%;
  position: relative;
    z-index: 1000;
}

.nav-wrapper {
  overflow-y: auto;
  position: relative;
}

.card {
  overflow: visible;
  position: relative;
  z-index:-1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>




<ul id='dropdown1' class='dropdown-content'>
  <li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>

<nav>
  <div id="nav-wrapper">
    <ul class=" brand-logo center">
      <li>
        <a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
      </li>
    </ul>
  </div>
</nav>

<div class="row">
  <div class="col s12 m6">
    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <span class="card-title">Card Title</span>
        <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
        <a href="#">This is a link</a>
      </div>
    </div>
  </div>
</div>

Answer 3

看起来主要问题是 id 为 nav-wrapper 的 div 应该是一个类。您的 css 会查找该类，但没有，因此永远不会被应用。然后在那个类中去掉overflow: auto并添加z-index: 1000。

这里是fiddle。

还有一个sn-p...

.dropdown-content {
  overflow-y: auto;
  position: relative;
  z-index: 1000;
}

.dropdown-content .dropdown-content {
  margin-left: 100%;
  position: relative;
  z-index: 1000;
}

.nav-wrapper {
  /*overflow-y: auto;*/
  position: relative;
  z-index: 1000;
}

.card {
  overflow: visible;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<ul id='dropdown1' class='dropdown-content'>
  <li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>

<nav>
  <div class="nav-wrapper">
    <ul class=" brand-logo center">
      <li>
        <a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
      </li>
    </ul>
  </div>
</nav>

<div class="row">
  <div class="col s12 m6">
    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <span class="card-title">Card Title</span>
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
        <a href="#">This is a link</a>
      </div>
    </div>
  </div>
</div>