CODEWITHSUNDEEP
htmlscrollbarcss-position
commonpike
commonpike

Reputation: 11185

scrollbar covered by inner element with position absolute

I havent found this exact question.

I have a page set up as

<div id="page">
    <div id="chrome">
        <div id="element">bla</div>
        <div id="content">bla</div>
    </div>
</div>

#page has position:absolute, and dimensions
#chrome has position:static, and overflow:auto
#element has position:absolute, right:0, top:0

#content has a large amount of content. it scrolls within #chrome, whereas #element stays fixed on the #page, without needing position:fixed.

http://jsfiddle.net/pike/x4kshd3f/

In some browsers - mainly windows i think - the #element overlaps the top of the scrollbar of the #chrome.

Is this correct behaviour ? Is there a way to make the scrollbar of the static #chrome appear on top of its absolutely positioned children ?

PS .. there is a reason why its structured like this. I cant use position:fixed. I cant put the scrollbars on #page. #chrome has to be static.

Upvotes: 1

Views: 714

Answers (1)

commonpike
commonpike

Reputation: 11185

It actually happens on other browsers/platforms too, and yes, I'm afraid its intended behaviour.

Element with static positioning do not create a stacking context. the #element, which has position:absolute, has a stacking context. the effect is #element overlays #chrome, in a sense.

What seems to solve it in edge browsers is css 

#chrome { isolation:isolate }

which is a css candidate from 2014-12. and a very sensible one.

https://developer.mozilla.org/en-US/docs/Web/CSS/isolation

http://dev.w3.org/fxtf/compositing-1/#isolation

There are other ways to create a stacking context, but they all seem to interfere with the absolute positioning of #element, making it 'relative' to #chrome instead of #page (making it scroll along with the #content instead of staying fixed).

Still open for better supported solutions - I won't accept this answer.

Upvotes: 1

Related Questions