固定父母后面的子女

Question

我试图让一个孩子在父母的身后，但这是行不通的，因为我可以在互联网上找到；

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

因此，在我的hmtl中，我试图获得id search-suggestion的div，以使其位于nav-wrapper后面(因此阴影被抛在search-suggestion上)。

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实例

Answer 2

在CSS中，无论您做什么，都不能将childs放在parents后面，因为子parents是来自parent的inhereting，但是您仍然可以尝试将child放在z-index -1中，但是它会将child发送到body元素之下，如果您试图将z-索引给parent，将较低的z-索引给child，那么后面总是会给child提供相同的z-索引。

我建议你做的是拔出的搜索建议，然后玩、负利润率、或pull。