HTML之postion属性

HTML中拥有三种不同的定位方式，分别为静态定位、相对定位、绝对定位三种，一共可设置四个不同的属性值。即

• static（静态定位）
• relative（相对定位）
• absolute（绝对定位）
• fixed（固定定位）

上面的四种属性极易混淆，因此这里根据自己的理解简单说明下。

static属性

这种属性本质上就是HTML的默认属性，即不设置任何position属性(即不设置margin，padding，left，right …)时，HTML会按照标准文档流进行排列。

relative属性

这种属性简单的可以认为是static属性添加position属性之后形成的新属性。即对默认的HTML元素位置按照position属性值进行相应的偏移即可，此时元素仍按照标准文档流排列。

absolute属性

这种属性应该分为两种情况对待，即父对象有没有设置position属性。

• 如若有设置过，则按照最近的设置有position属性的父对象对齐，对齐点为该父对象的左上角。
• 如若没有设置过，则会以body为对齐对象，按照浏览器窗口进行对齐，对齐点为body对象的左上角。

fixed属性

这种属性可以简单的认为是一种特殊的absolute属性，即无论父对象如何，它均是以body对象为对齐点。即使拖动浏览器的滚动条，它的位置也不会改变。

注：absolute属性和fixed属性均会导致该元素完全脱离标准文档流。