html - 固定 parent 后面的 child

Question

我正试图让 child 落后于 parent ，但这并不奏效，因为我可以在 Internet 上找到它；

我找到了以下内容:http://jsfiddle.net/sidonaldson/a9wQJ/但这在我的设置中不起作用，这是我模拟的设置: http://codepen.io/cskiwi/pen/JGovdM

所以在我的 hmtl 中，我试图获取 ID 为 search-suggestion 的 div，以将其置于 nav-wrapper 后面(因此阴影转换在 搜索建议)

html:

<nav class="blended">
  <div class="nav-wrapper">
    <div class="row hide-on-med-and-down">
      <div class="col l3">
        thing
      </div>
      <div class="col l6">
        <form class="ng-pristine ng-valid">
          <div class="input-field">
            <input id="search" type="search">
            <label for="search"><i class="mdi-action-search"></i></label>
          </div>
        </form>
      </div>

      <div id="search-suggestion" class="dropdown-content hide-on-med-and-down">
        <div class="row">
          <div class="app col s6">
            <h5>Stuff</h5>
            <ul>
              <li><a href="">things</a></li>
              <li><a href="">things</a></li>
              <li><a href="">things</a></li>
              <li><a href="">things</a></li>
            </ul>
          </div>
          <div class="app col s6">
            <h5>Things</h5>
            <ul>
              <li><a href="">Stuff</a></li>
              <li><a href="">Stuff</a></li>
              <li><a href="">Stuff</a></li>
              <li><a href="">Stuff</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col l3">

      </div>
    </div>
  </div>
</nav>

和下面的 scss

nav  {
  .nav-wrapper{
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    z-index: 10;
    display: block;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    .input-field input[type=search] {
      height: 48px;
      line-height: 48px;
      margin: 8px 0;
      padding: 0 10px 0 75px;
      width: 800px;
      background-color: rgba(0, 0, 0, 0.07);
      border-radius: 3px;
      border: none;
      box-shadow: none;
      color: #ff8766;
      z-index: 4;
    }
    &> div {
      z-index:initial;
    }
  }

  #search-suggestion {
    background: red;
    top: 60px;
    left: 25%;
    width: 50%;
    opacity: 1;
    display: block;
    padding: 10px;
    z-index: -1;
      position: absolute;
  }
}

.row  {
  .col.l3{
    width: 25%;
    margin-left: 0;
  }
   .col {
      float: left;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0 0.75rem;
  }
}

Answer 1

您不能将子项移动到固定父项后面。作为解决方法，我建议将阴影移动到子 .row 元素:

nav  {
  .nav-wrapper{
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    z-index: 10;
    display: block;

    >.row {
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      background: #FFF;

      &:after { /* clearfix */
        content: "";
        display: table;
        clear: both;
      }
    }

    /* ...rest of code ... */
}

CodePen Example