Question

我在将div放入其中时遇到了一些麻烦。

我的页面分为两个方面。在右侧我想要几个div，其中第一个应该保持在它的父div之上。其余的应该在第一个div下面滚动。

我尝试使用position：fixed但是将它绑定到屏幕而不是包装div。

我的HTML如下

<div class="side">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis cupiditate a aut totam similique non ipsam, sapiente, nisi possimus dolorum odit voluptatum? Vero nostrum, ab?
</div>
<div class="side">
    <div class="wrapper">
      <div class="box one">Lorem ipsum dolor sit amet.</div>
      <div class="box two">Lorem ipsum dolor sit amet.</div> 
      <div class="box two">Lorem ipsum dolor sit amet.</div>
    </div>
</div>

我的CSS如下

    .side{
        width: 180px;
        float:left;
    }

    .wrapper{
      background-color:blue;
      width: 180px;
      height: 300px;
      overflow: scroll;
      position: relative;
    }

    .box{
      width: 360px;
    }

    .one{
      position: absolute;
      top: 0;
      left: 0;
      height: 100px;
      background-color: red;
      z-index: 2;
    }

    .two{
      z-index: 1;
      margin: 0;
      background-color: green;
      height: 400px;
    }

    .wrapper > div:nth-child(2){
      margin-top: 100px;
    }

我在jsfiddle做了一个演示：Demo

要重新捕获，红色div（方框1）需要保持在div的顶部，而当你向上滚动时，两个绿色div（方框2）在它们下方滑动。

非常感谢任何帮助。

Answer 1

如果我明白您的意思，只需修复.one类并删除顶部和左侧属性：

   .one{
      position: fixed;
      height: 100px;
      background-color: red;
      z-index: 2;
    }

http://jsfiddle.net/oouyu8av/1/

在另一个div中保持div

1 个答案: