定位详解

浮动
当一个元素浮动时，一个元素的位置依赖于放置在它周边的其他元素，那么围绕在他周边的是哪些元素，会换行吗？这取决于围绕于他的DOM（文本对象模型）

现在我要讲一个重点了
虽然浮动相当给力，但是也存在一些缺陷。典型的例子就是：

当父元素包含了多个子元素，子元素设置了宽度，当子元素都浮动起来的时候，他们就不会影响父元素的宽度，因此，父元素就会塌陷。

那么我们如何来清楚浮动呢？
方法一：

overflow:auto;

方法二：

clearfix;

---

position
position有四个值：static,relative,absolute

static是默认的，此时不接受位置属性上设置（top,right,left,bottom）另外，top属性的优先级高于bottom属性

relative
静态，仍然属于正常流，移位后，其他元素也能看到相对定位元素的默认位置，相对定位元素的默认位置还是被自身占用，别的元素无法占用，也就是说相对元素是相对于元素自身的边缘进行位移。

absolute
会脱离文档流，是相对于父类进行移动
当没有设置宽度和高度时，盒子使用top和bottom时，会使高度跨越整个浏览器，同样，使用left和right是会横跨整个容器，如果同时使用四种，就会全屏。

fixed固定定位
相对于浏览器窗口，不会随滚动条滚动
最常用于固定头部、或者脚部等。

---

z-index属性
给元素设置这个属性时，首先要在元素上设置position属性为relative、absolute或者fixed，数值越大越上面