Question

我的理解是CSS固定位置元素仅与视口相关。但是，从我所知道的情况来看，这是正确的，除非如果未指定“left”，它不会默认为0，而是默认为其容器的左边缘 - 在本例中为主div。 HTML：

<div id="main">
    <div id="fixed"></div>
    <div id="content"></div>
</div >

CSS：

#main{
    width:80%;
    margin-left:auto;
    margin-right:auto;
}
#fixed{
    position:fixed;
    width:100%;
    height:25px;
    background:yellow;
}
#content{
    width 100%;
    height:300px;
    background:red
}

在http://jsfiddle.net/2dudX/99/演示。如果我指定left：0，则固定元素将运行屏幕的宽度。是什么导致这种行为？如果我没有指定左，右，上或下，默认值是什么？

Answer 1

您看到的行为是正确的。

如果将position属性设置为值absolute或fixed，并且未指定偏移量，则将元素定位到静态位置，即位置它需要position: static。

然而，不同之处在于，无论偏移值如何（自动或明确指定），具有绝对/固定位置的元素都将从正常文档流中取出。

参考：http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

具体来说，围绕（我的释义）部分：

如果＆＃39;离开＆＃39;并且＆＃39;对＆＃39;是＆＃39; auto＆＃39;和＃＆＃39;宽度＆＃39;不是＆＃39; auto＆＃39;然后设置＆＃39; left＆＃39;到静态位置，然后解决“＃”;

如果您想了解偏移对高度的影响，请参阅以下内容：
http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

为什么CSS固定定位不考虑视口？

1 个答案: