position属性比起其他的基础属性来讲要复杂一些，我在这试着把里面的门道全部总结出来。
目前position有以下这些值，请把注释读三遍：
static：
对象遵循常规流。此时4个定位偏移属性不会被应用。
relative：
对象遵循常规流，并且参照自身在常规流中的位置通过[top]，[right]，[bottom]，[left]这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute：
对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠，而且，绝对定位层的margin:auto``会失效。
fixed：
表现与absolute一致。但偏移定位是以窗口为参考，没有定位祖先元素的概念。当出现滚动条时，对象不会随着滚动。
center：
与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
page：
与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）
sticky：
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）
上面虽然列了很多值，但是最后的三个值，虽然理想很美好，目前包括Chrome最新版本，和IE11都不支持，所以我干脆划掉。
现在需要研究的依然是static、relative、absolute、fixed。
研究的过程各种的测试，不多说了，花了我两个小时测试加写本文，所以我直接上结论：
名词解释：盒子模型
在CSS中，每一个元素都由一个矩形盒子所包含。每一个盒子都会具有一个内容区，内容区被一个内边距所包裹，内边距外是盒子的边框，并且在边框之外会有一个外边距用于与其他盒子分隔开来。下图是我在网上找的。
注意两个名词解释：
容器：最外的宽高范围，也就是下图算上top之类的宽高范围
内容：最内部的宽高范围
名词解释：定位祖先
定位祖先这个词是跟absolute绑定的，跟relative、fixed、static无关。定位祖先从字面上理解，就是负责定位的祖先。也就是说，祖先的位置决定了absolute的位置。祖先的宽和高等属性可以被继承，但是absolute的margin:auto会失效，margin: xxpx是有效的。
定位祖先可以是父元素，也可以不是。
关于定位祖先的更多介绍，看下文。
在没有设置偏移的前提下，relative、absolute、fixed三者的区别：
先说一句：不设偏移跟偏移设成0是两码事。
为什么先讨论没有偏移的前提，因为没有偏移的前提下，relative、absolute、fixed还是很乖的，行为比较容易理解，跟有偏移的情况有所不同。下面看：
- relative没有偏移的前提下表现可以视为static，至少可以先这么简单的理解，所以，我们经常为了给absolute找一个定位祖先，会给某个祖先元素设个relative。只要别给这祖先设偏移，那么这个祖先该吃吃该喝喝，就当static，所以你找个祖先元素当定位祖先，给它设个relative，通常没风险，就算给body设个relative，也没事。
- absolute和fixed没有偏移的前提下，它们所在的空间会被下面的元素占据，它们自身的位置由父元素的容器决定。若absolute没设偏移，则听爸爸的，有定位祖先也不好使。若设置了偏移之后，absolute眼里就只有定位祖先，爸爸也不一定好使，除非爸爸就是定位祖先。fixed没设偏移，也听爸爸的，设了偏移就听浏览器窗口和爸爸的。下面都有介绍。
- absolute和fixed在表现上的区别：fixed会保持在浏览器窗口的固定位置，absolute不是。
在设置偏移的前提下，relative、absolute、fixed三者的区别：
- 先说relative，比如给relative设个
right: 10px;，那么它和它的孩子们会往左挪10px，然而它的兄弟们会纹丝不动，它的祖先也纹丝不动。 - 然后说absolute，比如给absolute设个
right: 10px;，这时候分为有定位祖先和没定位祖先两种情况。 - 一直说的所谓定位祖先，可以是relative、absolute、fixed其中任意一个。注意，只有后代元素设了偏移，你这个定位祖先才有意义，否则后代元素都听爸爸的，没定位祖先什么事。定位祖先通常来讲是relative，因为relative不设偏移就跟static似的，思考问题比较简单。如果自己和祖先都是absolute，也允许。如果定位祖先是fixed，同样也允许。所以千万不要以为只有relative可以当定位祖先！先追溯到谁，谁就当定位祖先，不管定位祖先是relative还是absolute还是fixed。定位祖先生效的时候，按定位祖先的容器所在位置当做后代元素偏移的参考。
- 没有定位祖先，也就是祖先一直追溯到body标签也没找到，这时候就一种情况，就是拿body当定位祖先，偏移以body容器为参考。
- 最后说fixed，这回情况又不一样了。具体说，fixed的位置由
top、right、bottom、left这四个属性各自有没有设置、设置了多少，再考虑上父元素的容器位置，总共五大方面来决定，其实也不复杂： - 假设只设置
top: 10px，那么fixed相对于浏览器窗口的上偏移就是10px，左偏移没有设，就依据父元素的容器位置。这个特性，通常被用于网页的sidebar区域的内容导航。 - 假设只设置
right: 10px;，那么fixed相对于浏览器窗口的右侧偏移就是10px，上偏移没有设，就依据父元素的容器位置。 - 假设
top: 10px;right: 10px;，那么所有祖先元素都跟我不再有关系，我就只跟着浏览器窗口。这个特点，通常被用于网页左右角落的漂浮广告，另外还有屏幕居中的弹出层等等。 - 同理，假设只设
bottom: 10px，跟top: 10px类似，假设只设left: 10px，跟right: 10px类似，不多说。如果top和bottom全有呢？我先说句你神经病，然后告诉你，只有top起效。
relative、absolute、fixed互相嵌套、互为兄弟，会发生什么？
- 下级元素通常不会影响上级元素。为什么强调“通常”？因为当上级元素不设width/height的时候，下级元素如果是static或者relative，就有可能撑开上级元素，也就“影响了上级元素”。但是，这种撑开其实并不影响下级元素的定位，因为撑开是往右侧和下侧撑大，定位是基于左上角。
- 上级元素对下级元素要么没影响，要么就影响x或y轴，要么就全影响。影响的时候，下级元素的基准坐标就是上级容器的位置，从上级容器的padding内开始计算。当上级元素没有border和padding，这时也要注意margin叠加现象。
- 兄弟元素的影响就是占位or不占位，上面有提到。
- 占位当然好说了，就是我当你不存在，然后占了你的位置，我的位置跟你无关。所以记住，absolute、fixed是“没有兄弟”的，它们永远认为自己是独生子，而且随时准备当不孝子（一旦设偏移就可能跑出父亲的怀抱），所以它们的兄弟也不客气，也当它们是空气。两个兄弟absolute的话就是两个自以为是的独生子，也是互相当空气。两个兄弟fixed也是如此。
- 不占位就是relative，那么考虑个复杂情况：两个兄弟relative之间会发生什么？答案是第二个relative会假设第一个relative没有偏移，只考虑第一个元素的最外范围。如果第一个元素有margin范围，提起margin，我们都知道“margin叠加”现象，这是另外的知识，这里不说，只需知道两个兄弟relative也会margin叠加。
- 最后记住两点特别的用法：第一是absolute的定位祖先，第二是fixed只考虑父元素，就行了。下面专门说说这两点。
当relative、absolute、fixed为定位祖先元素，absolute为后代元素时，absolute的偏移是怎么计算的？
答：absolute的偏移计算，完全考虑定位祖先的偏移、margin、border、padding，从祖先的内容区开始计算偏移。因为absolute只服定位祖先，亲爸爸也没用，所以祖先内的其他任何文本和元素都会被忽略。
当relative、absolute、fixed为父元素，fixed为子元素，fixed的实际偏移是怎么计算的？
假设fixed有top，那么纵轴就跟父元素无关了，横轴呢？会计算父元素的left、margin、bottom、padding，也就是说fixed的偏移，是从padding里面的内容区开始计算的。因为fixed以为自己是独生子，所以父元素内的其他任何文本和元素都会被忽略。
同理，假设fixed有left，那么横轴就跟relative无关了，纵轴会计算父元素的top、margin、bottom、padding，是从padding里面的内容区开始计算的。因为fixed以为自己是独生子，所以父元素内的其他任何文本和元素都会被忽略。
relative、absolute、fixed碰巧视觉叠加在一起了，谁在前谁在后？
不复杂不多说，你以为的就是对的。后代元素在前，后写的在前。由z-index来改变顺序。但是，它们三个跟static的区别在于，static的子元素如果溢出父元素，是被隐藏的，而它们三个没这种说法。
设置了relative、absolute、fixed之后，还设置了float:left;，会怎样？
float:left;不起作用。
