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
属性均会导致该元素完全脱离标准文档流。