CSS定位那点事儿

这几日特别学习了定位的相关属性和用法，懵逼了好久。

说到定位懵逼，恐怕不得不提浮动，一开始也是懵逼，一会儿飘离文档流，一会儿又占了位置，说是啥脱离文档流半层，这点意思可是把咱们坑惨了。

后面又来了定位，再次飘离了文档流。

经过一番心思，理解，和试探，终究是有了些眉目。

稍作整理，分享给大家共同探讨。

无论是浮动还是定位，我们都要有一个概念，那就是标准文档流，在这里，块级元素会从上往下依次排列。

而定位呢，是一种脱离文档流的东西，下面详细来说。

语法：position：static /absolute/relative/fixed

取值：

1、static：默认值，无特殊定位，对象遵循HTML原则；

2、absolute：绝对定位，将对象从文档流中拖离出来

使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；

如果不存在这样的父对象，则依据根元素(html)《浏览器》进行定位，而其层叠通过z-index属性定义

3、relative ：相对定位，该对象的文档流位置不动，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；其层叠通过z-index属性定义

4、fixed：(固定定位)未支持，对象定位遵从绝对定位方式（absolute）；

但是要遵守一些规范（IE6浏览器不支持此定位） ；

声明以上是笔记，不是个人理解，在我看来

定位的第一种：相对定位，主要就是给绝对定位做参考位置的，当然了，这个值，不会影响他原本的状态和特点；

定位的第二种：固定定位，也比较简单，凡是发现网页上某个东西一直在浏览器窗口的某个位置时，就用这个；

定位的第三种就相对难一点，当然也可以去理解，只需记住：当一个盒子漂浮在另一个盒子上面时，就使用绝对定位；

而使用绝对定位就一定不能忘了，在父盒子上面加相对定位，否则就会跑出去啦。

再有就是所谓的辅助属性，left right top bottom z-index 这些都是只有定位才能写的属性，没有了定位，加这写就啥效果都没有！

后来更深入学习之后，发现定位真是超级棒，可以把任何一个元素定位到任何地方，再也不用考虑什么padding和margin啦。

在我得以不已时，发现了一个严重的bug，一次我漏写了一个盒子，后面所有的定位全部要往后面移动位置，我才恍然大悟！

整个网页用定位之后，改起来真是要命啊！！！

于是有重新回到了原点，发现定位只能在特殊的时候才使用，至于什么特殊时候，这就又回到了之前的理解上去了。

“当一个盒子漂浮在另一个盒子上面时”这就是那个特殊时候，于是就懂了，哈哈哈！！！

来源：千锋HTML5