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

您不能将孩子移到固定父母身后。作为一种解决方法，我建议将您的阴影移动到子user@example.org元素：

.row

CodePen Example

Answer 2

在CSS中，无论您做什么，都无法将childs置于parents之后，因为孩子距离inhereting parent，但您仍然可以尝试将child置于z-index -1，但它会在body元素下发送child，如果你尝试将z-index赋予parent和更低z-index到child后面，它总是给child提供相同的z索引。

我建议您拉出 搜索建议并使用 负边距 或<强> 位置

固定父母背后的孩子

2 个答案: