将 div 放在另一个 div 中

Question

我很难把 div 放在那里。

我的页面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（方框一）需要保持在 div 上方，而两个绿色 div（方框二）则在它们下方滑动向上滚动它们。

如有任何帮助，我们将不胜感激。

Answer 1

如果我明白你的意思，只需修复 .one class 并删除 top 和 left 属性：

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

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

将 div 放在另一个 div 中

keep a div in place within another div

css

css-position