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

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

例如，假设html文件具有的2000像素宽度的元件E，那么这个文档的宽度大约是2000像素，因此以下代码：

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

应该放置的元件#abs在文档的最右侧（文档的最右边和最左边之间的距离大约为2000px）。相反，#abs放置在视口的右侧。我错过了什么？

感谢名单

来源

2009-12-22 carewithl

我想你错过的是，视算作最上方的元素。

<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会沿着右边缘。添加一个2000像素宽的元素不会改变这一点。

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

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

来源

2009-12-22 18:54:44 idrumgood

呃，这完全令人困惑 - 我认为“视口是最上面的元素”，你的意思是说，视口包含页面中的所有其他元素，包括元素#abs？但是，如果是这种情况，那么视口也包含＃wide元素（宽度为2000px）。如果视口也包含#wide元素，那么视口的宽度至少为2000px，因此视口的最右侧应该是离视口最左侧2000px ?! – carewithl 2009-12-22 19:35:47

另外，您暗示浏览窗口只是浏览器在水平栏滚动到文档最左侧时显示的窗口，而据我所知，视口是当前由浏览器显示的文档的任何部分，即使是当水平滚动条滚动到该文档的最右侧时，浏览器显示的文档的一部分（假设文档非常宽）？ – carewithl 2009-12-22 19:39:40

视口并不意味着你的想法。视口是浏览器的可见部分。如果拖动浏览器的宽度为900px，则视口为900px。视口不会根据内部内容进行更改。视窗不是页面上的实际元素，不像。如果包含2000像素宽的元素，但不包含视口，则的确为2000像素。视口与您制作浏览器窗口的大小完全相同。 – idrumgood 2009-12-23 16:27:11

position:absolute元素基于他们在position:relative最近的父母上的定位。元素的默认位置是static。（<body> - 是一个元素，但也可以是验收规范这一static规则。）

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

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

来源

2012-07-04 12:06:35 Dawson

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

用于定位的盒子的含块由最近的定位的祖先建立（或者，如果不存在，则initial containing block，如在我们的例子）。

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

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

来源

2013-08-16 22:11:09 jaredjacobs

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

回答

相关问题