CSS position属性

总述

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定位是固定定位，没得说的，就是简单的固定在浏览器的一个位置，不会随着滚动而改变位置，很多广告就是用了这个属性，让其固定在一个角落。