Fixed Positioned Div Inside another Div

I have one div position:fixed; and my problem is that position fixed is relatively to all the page, I need that the fixed div stays inside other div that is centered in the page with margins in auto.(So when I scroll down the page I want to see always the div in the same posi开发者_开发百科tion).

I use the jquery plugin StickyScroll but I can't make it work in Internet Explorer.

The solution could be in jquery/javascript , css.

Thanks

Then you don't want fixed positioning, but absolute positioning.

Set position: absolute; on the element that you want to position. Set position: relative; on the centered div so that it becomes a layer that you can position elements inside.

Just changed little in George Katsanos code might be helpful for some one.

.outer {
    width:200px;
    height:300px;
    background-color:red;
    margin:0 auto;
    overflow:auto;    
}

.inner {
    width:182px;
    border:1px solid white;
    position:absolute;
    background-color:buttonface;
}

Sample at: http://jsfiddle.net/2mYQe/480/

You definitely don't need jQuery or JavaScript to achieve this. This is what you need:

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
}
.inner {
    width:50px;
    border:1px solid white;
    position:fixed;
}

<div class="outer">
    <div class="inner">some text here
    </div>
</div>

Have a look at this: http://jsfiddle.net/2mYQe/1/

The correct solution is "flex." It's been 3-years since the original post so I'm going to assume we can ignore IE8 support in favor for more modern browsers that support this solution.

As many here have noted every proposed solution faces issues. From the first item in the content area being hidden from the absolute positioned header, or the content area consuming the full height of the parent meaning there is risk for the bottom of the content area being cut off unless you subtract the header from it's overall height (ex. height: calc(100% - "header height"px) which means you have hard-coded values in your CSS...not good, or the scroll bar being set at the parent level meaning the header is fighting it for real-estate.

In order to avoid these hack solutions use the "flex" solution below.

<div style="width: 200px; float: right; border: 1px solid black;
    display: flex; flex-direction: column;">
    <div style="width: 100%;">
        <div style="width: 100%;">
            I'm a header
        </div>
    </div>

    <div style="width: 100%; height: 100%; overflow:auto;">
        <div style="height:900px; background-color:lavender;">content area</div>
    </div>
</div>

I think you should apply your inner div position as sticky, its kinda fixed too but relative to the parent container(div). I had the same problem and I fixed it like that.

<div id="container">
    <div id="inner">Some text here..</div>
</div>
    
<!-- CSS -->
<style>
    #container{
        position: <!--any position-->;
    }
    
    #inner{
        position: sticky;
    }
</style>