固定位置div不包含在包装div，覆盖整个屏幕？ [英] Fixed position div not staying contained in wrapping div, overlays entire screen?

问题描述

我想让一个固定的位置div留在外部div。我想要固定位置div的宽度是100％。但是，当我将宽度设置为100％时，固定位置div覆盖整个屏幕，并覆盖在Firefox / IE8等滚动条。这里是我所说的一个例子：

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

如你所见，外部div的宽度为380像素...所以，不认为固定位置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.

我做错了什么？

谢谢！

推荐答案

到视口。固定元件从正常流中移除。

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.

虽然你声明了 position：fixed; ，则不要为 top 和 left 属性指定值。两个属性的默认值为 auto ，它允许浏览器计算顶边和左边的位置。计算出的边缘位置是正常流程中元素的顶部和左边缘位置，这就是为什么在设置边距时它移动的原因。

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.

这篇关于固定位置div不包含在包装div，覆盖整个屏幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！