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

【问题标题】：Why Doesn't CSS Fixed Positioning Consider the Viewport Only?为什么 CSS 固定定位不只考虑视口？
【发布时间】：2013-10-01 14:46:52
【问题描述】：

据我了解，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 固定元素将运行屏幕的宽度。是什么导致了这种行为？如果我不指定左、右、上或下，默认值是什么？

【问题讨论】：

标签： css width css-position fixed

【解决方案1】：

您看到的行为是正确的。

如果将position 属性设置为absolute 或fixed 的值，并且未指定偏移量，则将元素定位到静态位置，即与@987654326 一起使用的位置@。

但是，不同之处在于位置 absolute/fixed 的元素会从正常的文档流中取出，而不管偏移值如何（自动或显式指定）。

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

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

如果'left'和'right'是'auto'并且'width'不是'auto'，则将'left'设置为静态位置然后求解'right'

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

【讨论】：