javascript - div 总是在固定元素之上

Question

我想做的事情很简单。我的页面底部有固定的 div。它必须始终显示在底部，因此使用固定位置。

在这个 div 中有 2 个 div，一个小的必须总是在这个固定的 div 之上，另一个必须是可滚动的。

问题是小 div，如果我给他固定位置，它就是窗口顶部的位置，而不是这个固定 div 的顶部，正如您在这个 fiddle 中看到的那样

如果小 div 是绝对位置，它位于固定 div 之上，但如果它是滚动的，正如您在这个 fiddle 中看到的那样

HTML

<div class="bottom">
 <div class="top"></div>
 <div class="content"></div>
</div>

CSS

.bottom
{
    padding:20px;
    height: 253px; 
    position: fixed; 
    bottom:0px;
    width:100%;
    background-color: red;
    overflow-x: hidden;
    overflow-y: scroll;
}

.top
{
    height:50px;
    width:100%;
    background-color: yellow;
    position: fixed;
    top: 0px;
}

.content
{
    height: 1500px;
    background: linear-gradient(green, blue);
}

是否可以在不通过 jvascript 观看滚动的情况下完成这项工作？通过纯 CSS？

Answer 1

您可以使用包装器 <div>对于内容并让它滚动 - 这样绝对定位的兄弟就不会随着它滚动，如下所示:

HTML

 <div class="bottom">
   <div class="top"></div>
      <div class='contentWrap'>
        <div class="content"></div>
      </div>
 </div>

CSS

.contentWrap{
 height:100%;
 overflow-y:auto;
}

* {
  margin: 0;
  padding: 0;
}
.bottom {
  padding: 20px;
  height: 253px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: red;
  overflow: hidden;
}
.top {
  height: 50px;
  width: 100%;
  background-color: yellow;
  position: absolute;
  top: 0px;
}
.contentWrap {
  height: 100%;
  padding-top: 30px; /* .top height - .bottom padding*/
  overflow-y: auto;
}
.content {
  height: 1500px;
  background: linear-gradient(green, blue);
}

<div class="bottom">
  <div class="top"></div>
  <div class='contentWrap'>
    <div class="content"></div>
  </div>
</div>

JSFiddle Demo