keep a div in place within another div - css

Question

I have some trouble keeping a div in it place.
My page is divided into two sides. Within the right side I want to have a couple of divs, the first of which should stay on top of it's parent div. The rest should scroll underneath this first div.
I tried it with position:fixed but that binds it to the screen instead of the wrapper div.
My HTML is as follows
<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>
My CSS is as follows
.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;
}
I made a demo at jsfiddle: Demo
To recapture, the red div (box one) needs to stay on top of the div while the two green divs (box two) slide underneath them as you scroll them up.
Any help would be greatly appreciated.

Answer 1

If I'm getting what you mean, just make the .one class fixed and remove the top and left attributes:
.one{
position: fixed;
height: 100px;
background-color: red;
z-index: 2;
}
http://jsfiddle.net/oouyu8av/1/