Need a fixed positioned div inside an absolute positioned div

Question

I'm using the Snap.js plugin - (it allows you to create scrolling side drawers/panels).

It works by creating 3 absolutely positioned divs, one of which contains main content.

Is there a way to position a div fixed to the top of the window when it is itself inside the absolutely positioned div.

At the moment i'm just getting the fixed div to pin to the top of the absolutely positioned div, rather than to the top of the browser. When I scroll, the div remains fixed to the top of the main content, but not the window.

For example:

<div style="position:absolute;">

    <div style="position:fixed;top:0">
       <!-- some content which needs to be pinned to top of window -->
    </div>

</div>

At the moment i'm using javascript to track the scroll offset and manually adjust the top position of the child div, which is not ideal for performance.

Any help appreciated!

Answer 1

I've made a fiddle showing my javascript workaround - it jitters when scrolling in internet explorer, any ideas.

<div id="displayed-content" class="snap-content scrollable">
    <div><!-- regular content --></div>
        <div><!-- fixed content --></div>
    <div><!-- footer content --></div>
</div>

http://jsfiddle.net/bxRVT/

Answer 2

I am guessing a bit about what you are trying to do, but you might be looking for something like this:

<div class="local-wrap">
    <div class="fixed">
       Some content which needs to be pinned to top of window
    </div>
    <div class="port">
        Regular content...
    </div>
</div>

and apply the following CSS:

.local-wrap {
    position: relative;
}
.local-wrap .fixed {
    position: absolute;
    top: 0;
    left: 0;
    background-color: lightgray;
    width: 100%;
    height: 5.00em;
}
.local-wrap .port {
    position: relative;
    top: 5.00em;
    min-height: 10em;
    height: 15em;
    overflow: auto;
    border: 1px solid gray;
    border-width: 0 1px 1px 1px;
}

Demo fiddle: http://jsfiddle.net/audetwebdesign/pTJbW/

Essentially, to get a fixed block with respect to a block element, you need to use absolute positioning. Fixed positioning is always with respect to the root element or view port, so position: fixed won't help you.

What I have done is define a .local-wrap container, with two child blocks, one which is positioned absolutely to the top of .local-wrap and the other in regular flow. I used position: relative to position it below .fixed, but a top margin would have also worked.

I fixed some heights to demonstrate scrolling content within the local window/port, but that can be changed depending on your design and application.

Disclaimer

I am not familiar with snap.js so there may be other considerations to consider.

Comment on CSS3 Transform and Fixed Elements

According to the CSS3 specs, if you apply a transform to an element, call it div.transformed, then div.transformed creates a new stacking context and serves as a containing block for any fixed position child elements that it contains, which is why in your scenario, the fixed position context does not stay at top of the window.

For reference, see Mozilla Developer Network -> CSS Reference -> Transform