CSS - 将div放在固定定位div

Question

在我的网页上，我找到了main-section和top-bar的固定位置。主要部分占用100vh。我需要以某种方式将#drawer div放在main-section之下，但不知道该怎么做？

这是html的结构：

＆＃13;

＆＃13;

html,
body {
  height: 100%;
  position: relative;
  overflow-y: scroll;
}
#main-section {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 77px;
}
#drawer {
  z-index: 5;
  position: relative;
  max-height: 100%;
  overflow-y: scroll;
  width: 100%;
  background-color: $charcoal;
  //display: none;

}
.top-barz {
  position: fixed;
  top: 0;
}

＆＃13;

<div id="app">
  <div id="main-section">
    <div id="top-bar">
    </div>
    <div id="header">
    </div>
    <div id="carousel">
    </div>
  </div>

  <div id="drawer">
    <div id="item-detail">
    </div>
    <div id="item-detail-carousel">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

解决方案是将它放在它下面：

#drawer { z-index: 5; position: absolute; top: 100vh; }

Answer 1

只需使用z-index即可 - z-index

实施例

    html, body {
      height: 100%;
      position: relative;
      overflow-y: scroll;
    }

    #main-section {
      z-index: 3;
      background-color: green;
      height: 100vh;
      width: 100%;
      position: absolute;
      top:77px;
    }

    #drawer {
      z-index: 2;
      position: fixed;
      max-height: 100%;
      overflow-y: scroll;
      width: 100%;
      background-color: gray;
      //display: none;
    }

    .top-barz {
       position: fixed;
       top: 0;
     }

<div id="app">

    <div id="main-section">

       <div id="top-bar">
       </div>

       <div id="header">
       </div>

       <div id="carousel">
       </div>

    </div>

    <div id="drawer">

      <div id="item-detail">
      </div>

      <div id="item-detail-carousel">
      </div>

    </div>

  </div>

Answer 2

如果您希望所有代码都是固定的，则只需添加以下 css代码

div {
    position: fixed;
    width: 600px;
    height: 200px;
    top: 0px;
    left: 0px;
} 

Answer 3

您可以添加新div作为包装器，或者使用<div repeat.for="i of messages.length"> <input type="text" value.bind="$parent.messages[i]"> </div> div本身并使用#app对其应用固定定位。之后您可以在其中添加任意数量的DOM，默认位置或任何高度的overflow: auto，以便它们一个接一个地流动。

＆＃13;

＆＃13;

position: relative

＆＃13;

html,
body {
  height: 100%;
  position: relative;
  margin: 0;
}
#app {
  height: 100%;
}
.wrapper {
  height: calc(100% - 77px);
  width: 100%;
  position: fixed;
  top: 77px;
  overflow: auto;
}
#main-section {
  height: 100vh;
  background-color: grey;
}
#drawer {
  z-index: 5;
  position: relative;
  max-height: 100%;
  overflow-y: auto;
  width: 100%;
  background-color: green;
}

＆＃13;

＆＃13;

＆＃13;