держать div на месте в другом div

Question

У меня есть проблемы с сохранением div в нем.

Моя страница разделена на две части. В правой части я хочу иметь пару div, первая из которых должна оставаться на вершине своего родительского div. Остальное должно прокручиваться под этим первым div.

Я пробовал его с положением: исправлено, но привязывает его к экрану вместо обертки 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, пока два зеленых divs (коробка два) скользят под ними, когда вы прокручиваете их вверх.

Любая помощь была бы принята с благодарностью.

Answer 1

Если я получаю то, что вы имеете в виду, просто сделать класс .one фиксированной и снимите верхнюю и левую атрибуты:

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

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