总述
CSS中,position一共有5种值,分别是inherit,static,relative,absolute,fixed。其中,inherit是从父元素继承;static是默认值,即没有定位,值得一提的是,一旦设置了position:static的元素,其left,right,top,bottom属性都将无效;relative是相对定位;absolute是绝对定位;fixed是固定定位。
relative
relative是相对定位,其位置是由其元素本身在文档流中的位置与left,right,bottom,top属性的值决定的。值得注意的是,如果此元素有margin-top,margin-left,margin-right,margin-bottom属性,那么会先计算margin-top,margin-left,margin-right,margin-bottom值(即得出元素在文档流中的位置),再计算left,right,bottom,top属性的值,而计算left,right,bottom,top属性值是基于它自身的位置,比如{top:15px}就是此元素向下走了15个px的位置。虽然relative的元素没有脱离文档流(他的本身的位置是‘’保留‘’下来的,文档流中的元素并不会占用他的位置。),但它不会对其他元素造成影响。
absolute
absolute是绝对定位,其位置我认为分2种情况,第一种是不带有left,right,bottom,top属性的值,另一种是带有left,right,bottom,top属性的值。先说第一种,不带left,right,bottom,top的absolute的元素,还算‘’温柔‘’,其位置是他当前再文档流中的位置;第二种是带有left,right,bottom,top属性值的absolute元素,这类元素,就比较‘’残暴‘’了,他的定位方式将不再根据他自身在文档流中的位置,而是基于其最近的postion不为static的父元素,否则为Body文档本身。值得注意的是,一个元素一旦赋予了absolute属性,它将立即脱离文档流,不会影响其它元素,不会像relative元素一样保留它的位置,其位置将会被文档流中的元素占用。
fixed
fixed定位是固定定位,没得说的,就是简单的固定在浏览器的一个位置,不会随着滚动而改变位置,很多广告就是用了这个属性,让其固定在一个角落。