Css定位总结

时间：2015-05-25 23:46:03 阅读：200 评论：0 收藏：0 [点我收藏+]

标签：

CSS position

static

默认值，没有定位。元素框正常生成。块级元素生成一个矩形框，作为文档流(normal flow)的一部分，行内元素则会创建一个或多个行框，置于其父元素中。top,right,bottom,left,z-index属性无效。

　　　　W3C这样描述：　　　　

 z-index：
            Only works on positioned elements(position: absolute;, position: relative; or position: fixed.

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

relative就是对默认static定位的相对偏移，也就是说如果top、left都设0，那么此时的relative就跟static基本相同了，否则的话就在static的基础上进行相对偏移。relative的一个重要用处是给设置绝对定位的子元素确定一个“父容器”。相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

总结：

static是在normal flow中，原有的位置保留，top,right,bottom,left,z-index属性均无效，而在relative,absolute,fixed这些属性均有效。
absolute,fixed均不在normal flow中，原有位置不保留，absolute与fixed的区别是包含块，前者的包含块是第一个非static的祖先元素，后者的的包含块是视窗本身。
relative就是对默认static定位的相对偏移，在normal flow（非浮动）中，原有的位置保留。relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。

包含块

怎么确认一个元素的包含块？