Question

据我所知，绝对定位是相对于提供定位上下文的包含块，默认情况下是文档。因此，默认情况下，应该相对于html文档的边缘指定绝对定位，而不是相对于视口（浏览器窗口）的边缘？

例如，假设html文档的元素E的宽度为2000px，则此文档的宽度约为2000px，因此代码如下：

#abs
{
   position: absolute;
   top: 128px;
   right: 0px;
   width: 100px;
}

应将元素#abs放置在文档的最右侧（文档最右侧和最左侧之间的距离约为2000px）。而是将#abs放置在视口的右侧。我错过了什么？

感谢名单

Answer 1

我认为你缺少的是视口被视为最重要的元素。

<html>
<head>
    <style type="text/css">
        #abs{
           position: absolute;
           top: 128px;
           right: 0px;
           width: 100px;
           height: 100px;
           background-color: #333;
        }
    </style>
    <title>test</title>
</head>
<body>
    <div id="abs">
        test
    </div>
</body>
</html>

这模仿了你所说的行为。如果更改视口大小，则#abs div将跟随右边缘。添加2000px宽的元素不会改变这一点。

<html>
<head>
    <style type="text/css">
        #wide{
            width: 2000px;
            height: 1px;
        }
        #abs{
           position: absolute;
           top: 128px;
           right: 0px;
           width: 100px;
           height: 100px;
           background-color: #333;
        }
    </style>
    <title>test</title>
</head>
<body>
    <div id="wide">
        wide
    </div>
    <div id="abs">
        test
    </div>
</body>
</html>

所以我认为你的主要问题是你的假设是错的。当没有其他任何东西具有包含它的相对或绝对位置时，绝对定位是相对于视口的。

Answer 2

默认情况下，绝对定位是相对于文档的“初始包含块”。来自the CSS 2.1 spec：

定位框的包含块由最近的框建立定位祖先（如果不存在，则为initial containing block，如我们的例子中所示。）

“初始包含块”是一个与视口大小相同的矩形，它始终位于文档的开头（通常是左上角）。滚动时，它不会在文档中移动，就像视口一样。

This example说明了相对于初始包含块的绝对定位。

Answer 3

position:absolute个元素的定位基于position:relative的最近父级。元素的默认定位是static。（<body> - 是一个元素，但可能是对此static规则的接受。）

从我上面看到的，你所描述的是<body>包含#abc而不是视口（窗口等）。因此水平滚动。

http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

默认是相对于文档的绝对定位还是......？

3 个答案: