Fixed position div not staying contained in wrapping div, overlays entire screen?

I'm trying to make a fixed position div stay within an outer div. I want the fixed position div's width to be 100%. However, when I set the width to 100%, the fixed position di开发者_运维百科v covers the entire screen and overlays the scrollbar in Firefox/IE8 etc. Here is a sample of what I'm talking about:

<div style="width: 380px; height: 125px;overflow-y: scroll;overflow-x: hidden;">
    <div style="position:fixed;width:100%;">
        <div style="width: 100%;background: red; text-align: center; height:50px;">header</div>
    </div>

    <div style="margin-top: 50px; height:250px;">
        Contents here<br />
        Contents here<br />
        Contents here<br />
        Contents here<br />
        Contents here<br />
    </div>
</div>

As you can see, the outer div has a width of 380 pixels... so, I would not think it possible for the fixed position div to extend outside of this boundary, yet it does.

What am I doing wrong?

Thanks!

---

An element with fixed position is positioned relative to the viewport. Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

Although you declare position:fixed;, you don't specify a value for the top and left properties. The default value for both properties is auto, which lets the browser calculate the top edge and left edge positions. The calculated edge positions turn out to be the element's top and left edge positions in the normal flow, which is why it moves when you set a margin.

---

Fixed is always relative to the parent window, never an element. Once the position is set to fixed its taken out of the document flow.

http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.

---

The Browser will align the fixed div the best it can to the containing div by default.

My solution is to put it inside a relative div that floats to the right. This will give you your starting point and the fixed div will be floated to the right.

All the position: fixed will do here is make

<div class="page-container">    
    <div style="position: relative; float: right;">
        <div style="position: fixed; bottom: 10px; text-align:right; background:#000000; opacity:.8; padding:5px;">
            <a href='#Top' style="color:#fff; margin: 0 5 0 5">Return to Top</a>
        </div>
    </div>
</div>

I know this post is old, but hopefully it helps someone. Works in IE7+ and Firefox for sure.

---

It is exactly your question that helped me find a solution that worked for me. I had to create the "Holy Grail" (that is a fixed column on left and right and a fluid column in the center) from scratch but needed fixed divs inside each of the relative, floating columns.

While it may not necessarily be semantically correct (well, neither are fixed divs...) it does actually work precisely as needed and even obeys the resizing of the center column of the "Holy Grail".

Below is a copy of the exact CSS I used:

#fixedcenterarea {
    width:(100%-210px); /*Right column of 200 minus a margin gap of 10; works in IE too*/
    height:70px;
    position:fixed;
    left:200px;  /*obey the left column of 200*/
    right:210px; /*trim off 210px from the right of the viewport (200 column plus 10 margin*/
    overflow:hidden;
    margin-left:10px; /*adds a gap from the left column*/
}

You can also add top:50px; to bump it down vertically.

The only down side to this is in the resize of the window. Everything is fine until the window goes below the minimum size (if you have one set).

Since this uses a percentage of the container, it will continue to follow even though the view-port has stopped shrinking.

And, if you're curious, here's how to create the Holy Grail: http://www.alistapart.com/articles/holygrail/

---

This post is very old, but others may benefit from this answer. In modern browsers you could use transform: translate3d(0,0,0); on the .parent to make the position fixed behave as absolute:

<div class="parent">
    <div class="child"></div>
</div>

Over that structure you can use the following CSS:

.parent {
    position: relative;
    transform: translate3d(0,0,0);
}

.child {
    position: fixed;
}

The following will make the .child behave as if it would be position: absolute;. This is very helpful when you need to use transforms with the parent having overflow: hidden;. Someone had a good example of this case here.

---

Fixed, Absolute and Static positions are not relative to the parent. So if you change anything about them, they are changed via their base (e.g top,left page corner for absolute)

Think of another laying out method.