滚动条由内部元素覆盖，位置绝对

Question

我还没有找到完全的问题。

我将页面设置为

<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包含大量内容。它在#chrome中滚动，而#element在#page上保持固定，不需要位置：固定。

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

在某些浏览器中 - 我认为主要是Windows - #element与#chrome滚动条的顶部重叠。

这是正确的行为吗？有没有办法让静态#chrome的滚动条出现在绝对定位的孩子的顶部？

PS ..有一个原因，它的结构是这样的。我不能使用位置：固定。我不能把滚动条放在#page上。 #chrome必须是静态的。

Answer 1

它实际上也发生在其他浏览器/平台上，是的，我担心它的预期行为。

具有静态定位的元素不会创建堆叠上下文。 #element，其位置为absolute，具有堆叠上下文。从某种意义上说，效果是#element覆盖#chrome。

在边缘浏览器中似乎解决它的是css

#chrome { isolation:isolate }

这是2014-12赛季的css候选人。而且非常明智。

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

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

还有其他方法可以创建堆叠上下文，但它们似乎都干扰了#element的绝对定位，使它“相对”#chrome而不是#page（使其与#content一起滚动而不是#content保持固定）。

仍然可以获得更好的支持解决方案 - 我不接受这个答案。