css - 绝对定位元素的包含 block 是什么？

Question

绝对定位元素的包含 block 是什么？似乎规则可能有点复杂......

规范应该在这里:
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

我想验证以下是否属实:

为简单起见，假设包含 block 是 block 元素(不是内联元素)...

1) 如果绝对定位元素有一个最近的祖先定位为“非静态”(相对、固定或绝对)，那么该祖先就是包含 block 。绝对定位元素是相对于它的。

2)如果没有这样的祖先，那么视口(viewport)就是包含 block ，所以绝对定位的元素是相对于视口(viewport)的。

不管包含 block 在什么上面，width:100% 或 n% 和 height:100% 或 n% 都是相对于包含 block 的。

这就是为什么

<div style="position:absolute;width:100%;height:100%;background:green"></div>

正下方将完全覆盖整个视口(viewport)——不多也不少。

我们也可以使用 position: fixed，除了 IE 6 不支持它......所以可怜的程序员需要使用 position: absolute 来代替......(好吧，没什么大不了的)

这是对绝对定位元素的准确描述吗？如果是这样，我认为 IE 6 及更高版本、FF、Safari、Chrome 都准确地遵循了这种行为？

Answer 1

概括:
position: relative
除了设置 之外什么都不做定位上下文 对于所有元素包含在其中 .然后你可以position: absolute通过从可能的top 中设置(通常是一个或两个)值来包含它包含的任何元素, right , bottom或 left .

如果你给一个元素 position: relative一个 top , right , bottom或 left值，它将相应地移动位置但留下 空格 默认情况下会在哪里。换句话说，它保留在文档流中，但有偏移。
position: absolute
要绝对定位某些东西，您需要询问' 绝对，但相对于哪个包含元素 '？它将是整个正文(默认)或页面上已定位的某些其他元素(通常使用 relative 或 absolute - fixed 也很有用和 supported in IE 7 but see this bug )。然后将其从文档流中取出 - 其他元素可能会出现在它的下方，但不会围绕它流动。如果它出现在另一个元素后面，则需要设置 z-index property把它移到前面。

一个常见的解决方案是有一个居中的容器( margin: 0 auto )和 position: relative position: absolute 在其中放置其他元素.

最后，我喜欢这个小interactive CSS positioning demo .