position定位的解说

在开发中，定位分为4种：relative、absolute、fixed、static。
所有元素默认都是static。
那么到底什么是定位呢？我们先来写个例子：

这里，我定义了3个div，分别上了不同的背景色，然后给他们加上了不同的定位，我们来看一下效果：

注意，我在这里拉动了浏览器右边的滚动条，由于屏幕太大，所以没有录制进去。
position:fixed
其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。
即使窗口是滚动的它也不会移动：
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
IE6不支持CSS中的position:fixed属性
position:absolute
将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。
position:relative
相对定位元素的定位是相对自己原本的正常位置。依据left，right，top，bottom等属性在正常文档流中偏移位置。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
这4种定位都有共同属性：left,top,bottom,right，通过设置这4种属性可以定位与相呼应元素的距离。还有一个属性z-index，z-index是设置定位层的堆叠顺序，该属性必须结合定位才有作用，z-index的值越大，堆叠的层就越前面。
那么，介绍完4种属性，我们来看一下如何结合起来使用呢？首先，我们来定义一个div，之后在div里放一个position:absolute的div：

效果如下：

我们会发现，position:absolute的div并没有以他的父级div为父元素，而是把当做了父元素来进行left 和 top的移动。接下来，我们把他的父级div加上position:relative：

效果如下：

我们会发现，这个时候，里面的position:absolute的div已经不以来作为父元素了，而是根据被加入了position:relative的div作为父元素。那么如果把这个父元素改为position:absolute呢？

效果如下：

同样的，子div仍旧将父类div作为父元素。
接下来，我们来试一下position:fixed，最后得出了一样的结果。
由此可以得出，position:absolute会向上找到有position定位的元素作为父元素。并根据父元素的位置进行绝对定位的移动。如果没有找到任何position的元素，那么position:absolute将作为父元素进行定位。posiiton:fixed不受任何position元素的影响，只将作为父元素。