定位模型
上一篇CSS盒模型中提到有六种盒模型：内联盒模型、内联块状盒模型、块状盒模型、表格盒模型、绝对定位盒模型、浮动盒模型。这里的定位模型与之类似，对不同的盒模型采用不同的定位模型去定位。
静态定位模型：对内联、内联块状、块状和表格盒模型进行定位
绝对和固定定位模型：对绝对定位盒模型进行定位
浮动定位模型：对浮动盒模型进行定位
上面这几种定位模型已经涵盖了六种盒模型了，对于一种盒模型，都能找到与之对应的定位模型。还有两种混合型的定位模型，主要是针对相对定位，因为相对定位并不改变原来的文档流。相对定位的元素还在文档流中占据着原来的位置，只不过在“显示”上相对原来的位置有所偏移，但它的相邻元素并不会因为它的相对定位而调整位置。
因此对任何非absolute、fixed定位的元素，都可以设置position: relative来混加，仅仅是在“显示”上对它们加点偏移量，并不改变它们在文档流中的实际位置。因此也就有了下面两种混合的定位模型。
相对定位模型：对除绝对定位盒模型外的任何盒模型进行相对定位
相对浮动定位模型：对浮动盒模型进行相对定位
相对定位
想控制浮动元素或正常排列中的元素的堆叠顺序，问题是，z-index不能应用到浮动元素和静态定位元素。这时可以用position: relative对它采取相对定位，使用z-index设置它的堆叠顺序。
相对元素的定位并没有脱离正常元素的排列位置，也没有改变它在正常排列位置时的形状。例如，如果一个内联元素横跨多行，那么当对其进行相对定位后，它会保留这个独特的布局。而对绝对定位来说，则恰恰相反，它会把内联元素转化成一个绝对盒模型，把其中内容重新排进绝对块状盒模型，这或许会改变它的布局。
可以选择性地把相对定位元素从它的原始排列位置上进行偏移，而不会改变排列中其他元素的位置。
可以把
position: relative赋给任何元素，这样，绝对定位的后代元素便可相对它来定位。
相对浮动
先说浮动定位
浮动元素的定位层位于块状元素之上，与正常排列顺序中的内联内容是相邻的。
浮动不会影响块状盒模型的定位，只会影响它们的内联内容。
浮动元素不会与其他浮动元素或内联内容重叠（除非浮动元素有负的外边距）。
用position: relative对浮动元素进行相对定位，在不影响其他元素（包括其他浮动元素和内联内容）定位的前提下，把浮动元素从现有位置上偏移。相对浮动还保留了元素在原始浮动排列顺序中的位置。
相对浮动也是在定位层被解析的，可以使用z-index控制它相对于其他浮动元素和定位元素的堆叠顺序。
注：只有position relative和static是与浮动兼容的
堆叠环境
静态元素按照文档顺序从下至上进行叠放。
定位元素依照文档元素排序的不同，从后往前按照z-index从小到大的顺序进行叠放。
当z-index被设置成auto或把z-index赋给非定位元素时，是不能产生堆叠环境的。
负z-index值的定位元素放在静态元素和非定位浮动元素的下面。
z-index不是全局的，它是相对于被赋上了z-index值的定位最近的祖先元素而言的。
每种堆叠环境都是原子化的，不允许其他祖先元素或兄弟元素放置于其内的子元素中。
堆叠环境按照如下定位层从后往前进行解析：
背景颜色、图片和堆叠环境元素的边框
拥有负z-index值的后代定位元素
后代非定位块状元素
后代非定位浮动元素
后代非定位内联元素
被赋予了
z-index :auto和z-index: 0的后代定位元素有正z-index值的后代定位元素
原子化
问题：浏览器把静态内联内容放在静态块状元素背景之上的一层进行解析的，当静态块状元素之间互相覆盖的时候，它们的背景也相应地覆盖了，可是内联内容却没有。因为堆叠环境首先解析的是所有的块状元素背景和边框，然后是所有浮动元素，接着才是所有的内联元素和内容。这样便把块状元素的背景和边框置于浮动元素和内联元素的下层了。
解决：定位元素就是原子化的，这意味着没有外部元素能够插在它的静态子孙元素、内联内容和背景之间。堆叠环境要求把定位元素当作不可分割的原子来解析，可用相对、绝对、固定这3种定位方式令元素原子化，被设置了overflow: scroll的块状元素也同样是原子化的。
注意：IE6有一些小bug，可通过触发hasLayout来修正，可以用IE的私有属性zoom: 1触发布局，但是zoom会令你的样式表不能通过校验。