理解CSS定位中的position

position属性建立元素布局所用的定位机制，默认值static，称作静态位置。任何元素都可以定位，CSS中的定位通常指absolute定位、fixed定位和relative定位，除了static定位外的其他定位都可以使用top, right, bottom, left设置偏移距离，可以是正值和负值，默认值是auto。

relative

relative定位也叫相对定位，它是相对于自己原本的位置进行偏移，不会脱离文档流，也不会改变元素的类型，相对定位元素会为其所有子元素建立一个新的包含块，这个包含块对应于该元素原本所在的位置，值得注意的是当定位值为百分比时是基于包含块的宽高（不包括padding和border）。偏移距离在表象效果上，top值等于负的bottom值，left值等于负的right值，所以通常只设置top和left就可以了。

absolute

absolute定位叫绝对定位。绝对定位的元素无论其本身是什么类型都会生成一个块级框，绝对定位元素会脱离正常的文档流，定位是基于距离该元素最近的非static定位的祖父辈元素，绝对定位的元素的三大特性：

包裹性

参考例1

当绝对定位作为父元素，会为其后代元素建立包含块，若绝对定位元素不设置宽度，宽度由子元素内容撑开。绝对定位的元素不会包含后代绝对定位元素，这也在情理之中，因为绝对定位的元素拥有破坏性，造成父元素高度塌陷。

破坏性

参考例2

绝对定位后的元素会脱离文档流，因此如果父元素不设置高度，会造成父元素高度塌陷，无论父元素是在正常流还是定位流中。这种塌陷是无法修补的，只能设置固定高度。

扩展：浮动元素也能造成父元素高度塌陷，但是可以通过清除浮动解决高度塌陷这个问题

去浮动

参考例3

如果一个元素设置了浮动，元素绝对定位后浮动将失效

偏移特性

参考例4

如果用top、right、bottom、left四个偏移特性来描述四个边的位置，元素的宽度和高度将会由这些偏移进行拉伸。例如如果四边设置为0，该元素会撑满父盒子（非static定位的距离最近的祖父辈元素），如果只设置了top或left，那么bottom和right的值是auto。如果包含块设置了固定宽高，偏移量可以使用百分比。

fixed

fixed定位也叫固定定位，它是相对于视窗定位(屏幕的可视区)，它和绝对定位有很多相似的地方。fixed定位也会脱离文档流元素，无论其本身是什么类型也会生成一个块级框，也具有包裹性、破坏性和去浮动性。

static

static称作静态位置，也就是元素在正常文档中原本的位置。有一点值得注意，如果元素本身是static或relative定位，当使用text-align: center时是可以正常居中的，因为居中对齐是元素内容的中线对应父块级元素的中线，而如果使用absolute或fixed定位，就变成元素左边线对应父块级元素的中线，结果就向右偏移了。