CSS 的很多其他属性大多容易理解，比如字体，文本，背景等。有些 CSS 书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS 中主要难以理解的属性包括盒型结构，以及定位。正如 positioniseverything，本文将主要讲述关于 position 的理解，力求让您看完本文后对 position 有着最全面的认识。
position 的四个属性值：

1. relative
2. absolute
3. fixed
4. static

下面分别讲述这四个属性。

1. relative
relative 属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1 和 sub2 是同级关系，如果设定 sub1 一个 relative 属性，比如设置如下 CSS 代码：

我们可以这样理解，如果不设置 relative 属性，sub1 的位置按照正常的文档流，它应该处于某个位置。但当设置 sub1 为的 position 为 relative 后，将根据 top，right，bottom，left 的值按照它理应所在的位置进行偏移，relative 的“相对的”意思也正体现于此。
对于此，您只需要记住，sub1 如果不设置 relative 时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。
随后的问题是，sub2 的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为 sub1 增加了 position 的属性而发生改变。
如果此时把 sub2 的 position 也设置为 relative，会发生什么现象？此时依然和 sub1 一样，按照它原来应有的位置进行偏移。
注意 relative 的偏移是基于对象的 margin 的左上侧的。
2. absolute
这个属性总是有人给出误导。说当 position 属性设为 absolute 后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是 fixed 属性的特点。
当 sub1 的 position 设置为 absolute 后，其到底以谁为对象进行偏移呢？这里分为两种情况：
（1）当 sub1 的父对象 (或曾祖父，只要是父级对象)parent 也设置了 position 属性，且 position 的属性值为 absolute 或者 relative 时，也就是说，不是默认值的情况，此时 sub1 按照这个 parent 来进行定位。
注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以 parent 的哪个定位点来进行定位呢？如果 parent 设定了 margin，border，padding 等属性，那么这个定位点将忽略 padding，将会从 padding 开始的地方 (即只从 padding 的左上角开始) 进行定位，这与我们会想当然的以为会以 margin 的左上端开始定位的想法是不同的。

接下来的问题是，sub2 的位置到哪里去了呢？由于当 position 设置为 absolute 后，会导致 sub1 溢出正常的文档流，就像它不属于 parent 一样，它漂浮了起来，在 DreamWeaver 中把它称为“层”，其实意思是一样的。此时 sub2 将获得 sub1 的位置，它的文档流不再基于 sub1，而是直接从 parent 开始。
（2）如果 sub1 不存在一个有着 position 属性的父对象，那么那就会以 body 为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。
3. fixed
fixed 是特殊的 absolute，即 fixed 总是以 body 为定位对象的，按照浏览器的窗口进行定位。
4. static
position 的默认值，一般不设置 position 属性时，会按照正常的文档流进行排列。
如果本文有任何技术或表达问题，请您留言。感谢您的阅读！