I am looking to create a scrollable element with an absolutely positioned element inside, along with a larger element for scrolling.
.container{
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
border: 1px solid red;
}
.content{
height: 300px;
background: green;
}
.wtf{
top: 0px;
position: absolute;
height: 10px;
width: 100%;
background: red;
}
<div class="container">
<div class="content">
</div>
<div class="wtf"></div>
</div>
http://codepen.io/anon/pen/pvKwvZ In this scenario, I aim to ensure the red element remains within the green square even after scrolling to the bottom.