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，可让浏览器计算上边缘和左边缘位置。计算出的边缘位置在正常流程中变为元素的上边缘和左边缘位置，这就是设置边距时它移动的原因。

Answer 2

固定始终相对于父窗口，而不是元素。将位置设置为固定后，将其从文档流中取出。

http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

固定定位是其子类别绝对定位。唯一的区别在于固定的定位框，包含块由视口建立。

Answer 3

默认情况下，浏览器会尽可能将固定div对齐到包含div。

我的解决方案是把它放在一个浮动到右边的相对div里面。这将为您提供起点，固定的div将浮动到右侧。

所有位置：固定将在这里做make

<div class="page-container">    
    <div style="position: relative; float: right;">
        <div style="position: fixed; bottom: 10px; text-align:right; background:#000000; opacity:.8; padding:5px;">
            <a href='#Top' style="color:#fff; margin: 0 5 0 5">Return to Top</a>
        </div>
    </div>
</div>

我知道这篇文章很老了，但希望它对某人有所帮助。适用于IE7 +和Firefox。

Answer 4

正是你的问题帮我找到了适合我的解决方案。我不得不从头开始创建“圣杯”（左侧和右侧的固定柱以及中心的流体柱），但需要在每个相对的浮动柱内部固定div。

虽然它可能不一定在语义上是正确的（好吧，既不是固定的div ......）它确实可以根据需要精确地工作，甚至服从“圣杯”中心栏的大小调整。

下面是我使用的确切CSS的副本：

#fixedcenterarea {
    width:(100%-210px); /*Right column of 200 minus a margin gap of 10; works in IE too*/
    height:70px;
    position:fixed;
    left:200px;  /*obey the left column of 200*/
    right:210px; /*trim off 210px from the right of the viewport (200 column plus 10 margin*/
    overflow:hidden;
    margin-left:10px; /*adds a gap from the left column*/
}

您还可以添加top:50px;以垂直向下碰撞。

唯一的缺点就是调整窗口大小。一切都很好，直到窗口低于最小尺寸（如果你有一套）。

由于这使用了容器的一定百分比，即使视口已经停止收缩，它也会继续跟随。

而且，如果你很好奇，这里是如何创造圣杯： http://www.alistapart.com/articles/holygrail/

Answer 5

固定，绝对和静态位置与父级无关。因此，如果您更改了有关它们的任何内容，则会通过其基础进行更改（例如，顶部，左页角为绝对值）

想想另一种布局方法。

Answer 6

这篇文章很老了，但其他人可能会从这个答案中受益。在现代浏览器中，您可以使用transform: translate3d(0,0,0);上的.parent来固定位置，表现为绝对：

<div class="parent">
    <div class="child"></div>
</div>

通过该结构，您可以使用以下CSS：

.parent {
    position: relative;
    transform: translate3d(0,0,0);
}

.child {
    position: fixed;
}

以下内容将.child的行为视为position: absolute;。当您需要使用父级为overflow: hidden;的转换时，这非常有用。有人就此案例here提供了一个很好的例子。

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

6 个答案: