图文详解CSS的position常用的三个属性：relative,absolute以及fixed,以及嵌套使用的一个常见情况

首先要清楚，position需要top,bottom,left,right来配合实现定位，当然根据实际情况，不必要把四个方向的定位全写出来。

举个例子。

position:absolute;

top:10px;

bottom:10px;

left:10px

right:10px

接下来就要分别介绍position属性的不嵌套使用（即该元素中没有子元素使用position），和嵌套使用这两种情况（即该元素中有子元素使用position）。

一、不嵌套使用：

（1）position:relative

这是相对于正常位置时的定位，看图：





图1-1






图1-2

相信效果大家已经看到了，当用了position:relative；left：10px后，红色div右边已经和下面黑色参照div右边重合，发生了

10px的位移，这也就是刚才说的相对于正常位置的定位。

(2)position:absolute

这是绝对定位，相对于父容器定位（因为实例中，没有任何父容器，所以相对于父容器就是相对于浏览器定位），看图：





图1-3






图1-4






图1-5

通过这三张图，我们可以看到，当把黑色div的属性加上position：absolute时，它会先向左平移到父容器左边，然后再通过设置top：0；

left：10px，移动到了父容器的顶部，且距离父容器左边10像素。当然，它也就覆盖了原来的红色参照div。

(3)position:fixed

这个比较有意思，是固定定位，相对于浏览器，位置固定不变，看图：

图1-6



图1-7

可以看到，当把网页向下拉，黑色div的位置还是相对于浏览器顶部20像素，左边50像素，就好像固定在了屏幕上一样，和上面两个例子比

起来，它好像会动态调整自己的位置，来达到不动的效果~~~是不是很有意思呢？

二、嵌套使用：

嵌套使用的话，会出现很多组合情况，在这就举一个比较实用的例子吧，其他情况大家可以尝试组合下，亲自试试。

看下面这个图，想一下，当我们想让导航条，在父容器的底部且居中，而又不知道具体高度时，该怎么做呢？




图2-1

其实很简单，只要将父容器加上：position：relative；子容器加上：position：absolute；bottom：0；left：0；right：0；就行了，效果如下：




好了，本文到此结束！累死哥哥了>.<~~~