绝对定位元素的包含块是什么？似乎规则可能有点复杂......
规范应该在这里：http : //www.w3.org/TR/CSS21/visudet.html# contains-block-details
我想验证以下是否属实：
为简单起见，假设包含块是块元素（不是内联元素）...
1) 如果绝对定位元素有一个最近的祖先被定位为“非静态”（相对、固定或绝对），则该祖先是包含块。绝对定位元素是相对于它的。
2) 如果没有这样的祖先，则视口是包含块，因此绝对定位元素是相对于视口的。
不管包含块在什么上面，width:100% or n% 和 height:100% or n% 都是相对于包含块的。
这就是为什么一个
<div style="position:absolute;width:100%;height:100%;background:green"></div>
<body> 正下方将完全覆盖整个视口——不多也不少。
我们也可以使用 position: fixed ，除了 IE 6 不支持它......所以可怜的程序员需要使用 position: absolute 代替......（好吧，没什么大不了的）
这是对绝对定位元素的准确描述吗？如果是这样，我认为 IE 6 及更高版本、FF、Safari、Chrome 都准确地遵循此行为吗？
你是对的。包含块是最后定位的元素。所以如果你想显式设置容器，那么给它位置：相对。大多数浏览器都能做到这一点。CSS 并没有真正的“视口”，我认为顶部是 HTML 元素，尽管我不这么认为。不过，7 之前的 IE 在 HTML 上方有一个未命名的元素。
position: relative除了为其中包含的所有元素设置定位上下文外，什么都不做。然后就可以position: absolute包含通过设置从可能的（通常为一个或两个）值的任何元件top，right，bottom或left。
如果你给一个元素有position: relative一个top，right，bottom或left价值，这将相应做出调整位置，但留下一个空白的地方将是默认。换句话说，它保留在文档流内，但有偏移。
position: absolute要绝对定位某些东西，您需要询问“绝对，但相对于哪个包含元素”？它要么是整个正文（默认），要么是页面上已经定位的其他一些元素（通常使用relative或absolute-在 IE 7 中fixed也很有用并受支持，但请参阅此错误）。然后它被从文档流中取出——其他元素可能会出现在它下面，但不会在它周围流动。如果它出现在另一个元素后面，则需要设置该z-index属性将其移到前面。
一个常见的解决方案是有一个居中的容器 ( margin: 0 auto) position: relative，其他物品放置在其中position: absolute。
最后，我喜欢这个小小的交互式 CSS 定位演示。