固定位置div不包含在包装div中,覆盖整个屏幕？

Question

我正在尝试使固定位置div保持在外部div中.我希望固定位置div的宽度为100%.但是,当我将宽度设置为100%时,固定位置div覆盖整个屏幕并覆盖Firefox/IE8等中的滚动条.以下是我正在谈论的示例:

<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>

正如你所看到的,外部div的宽度为380像素...所以,我认为固定位置div不可能延伸到这个边界之外,但它确实如此.

我究竟做错了什么？

谢谢!

Answer 1

具有固定位置的元素相对于视口定位.固定定位元素从正常流动中移除.文档和其他元素的行为类似于固定定位元素不存在.

虽然您声明position:fixed;,但您没有为top和left属性指定值.两个属性的默认值是auto,它允许浏览器计算上边缘和左边缘位置.计算出的边缘位置变为正常流中元素的上边缘和左边缘位置,这就是设置边距时移动的原因.