“位置”在css里的细节_html/css

请注意这里的entirely，这是在说，绝对定位是完全脱离文档流的。为什么要强调完全呢？

因为，脱离文档流是一个比较暧昧的概念，还有不完全的。请看浮动的描述：

In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible.

前文已经说过，浮动被归类为out of flow，也就是脱离文档流，但这里却提到了先基于文档流取得一次位置，然后再向左或向右移动。所以，浮动不是完全脱离文档流的。

浮动的特性

之前看到过别人的这样一个提问：

对应html代码（css省略）：

 normal float

按照传统的“浮动元素是脱离文档流的”的理解，为什么这个右浮动元素只是浮动到了它所在行的右边，而不是整个容器的右上角呢？

答案就是，浮动不是完全脱离文档流的。这有两方面的意思。

一方面，浮动可以影响文档流。你一定见过把一段文字里的某一个图片浮动，来制造文字环绕图片效果的用法：

这些位于文档流内的文字，仍然会为浮动元素留出空间，而并非互不相干。这其实是浮动元素影响行框（line box）的宽度的结果。

另一方面，浮动会受到文档流的影响。规范里列出的浮动元素的精确特性规则中有这样一条：

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

这里的outer top就是margin edge (outer edge)的top edge。意思是，浮动元素不可以高于任何在源文档之前的块元素或浮动元素。我们很熟悉浮动元素是会一个接一个地寻找空间排列的，但这一条却告诉我们，如果前面还有块元素，那么它们也会影响浮动元素的上边缘位置。

请看这个例子：

如果一个浮动元素之前还有其他的浮动元素，那么会考虑到它们，而可能排列到一个更靠下的位置。那么，如果之前还有块元素，而且占据了更大的位置呢？从上图可以看到，浮动元素同样会将其考虑在内。

这就是前面的提问的详细解释了。

绝对定位

绝对定位大部分时候并不像浮动这样让人困惑。显然，它被定义为“完全脱离文档流”，就是说它和文档流的关联很弱，一般只根据包含块和坐标来确定位置就可以了。

完全脱离文档流，也仍然不是说和文档流毫不相干，各自为政。它的意思是：这个元素在参与布局时，不会影响在它之后的兄弟元素。绝对定位元素，在left、top等定位属性取值auto的时候，仍然会根据文档流取得一个可用的计算值。

三者的覆盖关系

如果有重叠，就要考虑覆盖关系了。它们的位置从下到上依次是：

结语

想要让元素稳定地待在为它预定的位置上，还是有很多功课要做的。本文只介绍了一部分有关位置的细节知识，如果你也曾对这些内容有所困惑，那么希望能有所帮助。

（重新编辑自我的博客，原文地址：http://acgtofe.com/posts/2015/10/xyz-in-css/）