css中的position属性

最近做django页面要用到css+div，css中的position属性稍微有点不太好懂。这里做个笔记以便回顾。

   

    position属性有如下几个可选值：

• static

• relative

• absolute

• fixed

    

    其中static值是最好理解的，该值指定元素出现在正常的文档流中（同时如果有 top, bottom, left, right 或者 z-index 声明的话将全部忽略，因为这些值不是为static准备的），即按照元素的顺序该依次怎么排版就怎么排版。如果元素没有指定position属性，那默认值就是static。

 

    当position属性值为relative时，这个“relative”可理解为相对于其默认位置进行定位，或者说移动。比如说当position为relative时，同时声明了left: 20px和top: 30px，那么该元素将相对于其默认位置向右移动20px，向下移动30px。移动之后可能会遮挡住其他元素，可以通过Z-index属性进行层次上的限定。

 

    position属性值为absolute有点不大好明白。这里要分情况而论。

   

    从当前元素开始依次往上面找带有position属性且属性值不为static的父元素（这里应该成为祖先元素，因为不一定是上一层元素，也可能是上两层、三层等等），如果能找到这样的祖先元素，那么将从这个祖先元素的内边框的某个角进行定位（根据该元素声明了top、left、right、bottom等），注意这个某个角是padding区域的某个角，而不是width*height的某个角。如果找不到这样的父元素，则从浏览器的某个角开始定位，而不是以body的某个角进行定位。

 

    另外一点需要注意的是，如果具有position属性的这个元素没有指定任何top、right、bottom、left值的时候（一般脑子抽了才会这么做），当position为relative的时候，相当于指定"top: 0px; left: 0px;"。当position为absolute的时候，相当于没有position值为static时候的样子。甚至当只指定了trbl的一个方向时，指定的方向根据指定了position属性的祖先元素或者浏览器定位，而没有指定的那个方向相当于position值为static进行定位，从而出现不一致的情况。

 

    把这个说清楚真的要好��嗦，这还没有配图。以后再完善