巧克力工厂

节日期间，在右上角加了个桑塔的的帽子，不知道大家有没有注意到？这个帽子的摆放还是让我花了一些工夫的，主要还是自己对 CSS 没有任何基础，知道 position 属性可以摆放对象对指定的位置，不过对其下的四个子属性 (static, absolute, relative, fixed) 理解不够。

Hoofei.com 上有个简短的解释，不过正因为有点太简短，我看了以后还是犯糊涂。放狗搜了一下，发现几篇文章比较好，苦苦研究后，终于开悟。

下面我做一个总结：

Static 属性：

1. Static 属性是每个元素的默认属性，也就是说，如果你没定义 position 的属性，那么 position 的属性就自动是 static。
2. 主要用来 override 其它三个属性。

Relative 属性：

1. 从目前的位置的偏移量。
2. 这个属性相对地移动元素，但并不把该元素拿出 page flow, 因此移动后，原占据的位置依然存在。换句话说，原位置会显示为空白。
3. Relative 属性可以控制其子容器的 Absolute 属性的显示。

Absolute 属性：

1. 用的最多的属性。
2. 不像 relative, 有 absolute 属性的元素不属于 page flow, 也就是说，相对于 relative, 它并不在页面上占据位置，可以在有效的范围内自由移动。
3. 重要：absolute 的移动范围是受限于最近的一个拥有 position 属性的母容器，但不包括 position 的属性是 static 的母容器。举个例子，如果：
   div-1 {position:relative; width:200px; height:200px}
div-2 {position:absolute; top:0; right:0}
   div-1 是 div-2 的母容器的情况下， div-2 就会出现在 div-1 内的右上角处而不是很多人认为的整个屏幕的右上角处。如果 div-1 中 position 是 fixed, div-2 出现的位置也是一样的。
4. 如果拥有 absolute 属性的元素的母容器中没有设定了 position 的，那该元素则自动属于“初始容器 (initial containing block)”，至于这个初始容器是怎么定义的，按 CSS 标准的说法是，完全取决于各个浏览器了。但一般来说，是指 Body 或是 HTML 元素。

Fixed 属性：

1. 该属性跟 absolute 的特点一样，除了…
2. 有该属性的元素会固定在指定的位置，不随着屏幕的滚动而滚动。如果你不理解 fixed 属性是怎么工作的，可以看看 voivo.de 的效果。
3. 重要：IE 不支持该属性。可以用 IE 和 Firefox 浏览 voivo.de 比较一下。

最后，使用 position 属性是还有几点要注意：

1. 如果你的 relative 属性的 width 为一个相对值（比如50%），IE 的 bug 会把宽度计算成该元素的母元素的宽度而不是该元素本身的宽度。
2. 如果你为 absolute 属性设定了一个 width，不管是相对 (e.g. 35%) 还是绝对 (e.g. 450px) 值，按照 CSS 标准，这时该元素的位置应该由最近的定义了 position 的容器决定（本文前面提到过），但 IE 和 Opera 都会错误地把该元素的位置直接交给了上一级的容器来决定。到目前为止，只有 Gecko 引擎的浏览器（比如说 Mozilla 的浏览器）才能按标准正确的解释。
3. 最好为 absolute 属性设定 margin, padding 的值，因为浏览器对 margin 和 padding 的解释各不相同，这样做可以保持网页的兼容性。

参考文章：
Relatively Absolute
Learn CSS Positioning in Ten Steps
The position declaration