Fixed position div inside pos:relative & overflow-y:scroll

Question

I want to have a div with fixed position inside a div with overflow-y:scroll, meaning I want the div to stay in place while the rest of the content scrolls normally. And I can't figure out what is wrong, could anyone help? thanks in advance...

.foo {
    position:relative;
    display:block;
    width:100%;
    height:300px;
    overflow-y:scroll;
}
.bar {
    position:fixed;
    top:0;
    right:0;
}

And here is the HTML

<div class="foo">
    <div class="bar"><div><!-- end of div that should be fixed -->
    <div class="someOther">...</div>
    <div class="someOther">...</div>
    <div class="someOther">...</div>
    <div class="someOther">...</div>
</div><!-- end of container -->

Answer 1

A fixed elements position is relative to the entire document you are viewing, not whatever the parent element is. If you want that to work, you'd need something like this:

CSS

.foo {
    height : 300px;
    position : relative;
    width : 100%;
}
.bar {
    border-bottom : 1px solid #000;
    height : 50px;
}
.scollable_content {
    height : 250px;
    overflow-y : auto;
}

HTML

<div class="foo">
    <div class="bar"></div>
    <div class="scrollable_content">
        <div class="someOther">...</div>
        <div class="someOther">...</div>
        <div class="someOther">...</div>
        <div class="someOther">...</div>
    </div>
</div>

Here, I created a fiddle for you.