Css定位总结

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，不过其包含块是视窗本身。

 

 

总结：

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

包含块

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

• 根元素：
• 根元素包含块由用户代理建立。在html中，根元素是html 元素，有些浏览器的也会用body做为根元素。大多数浏览器中，初始包含块是一个视窗大小的矩形。

• 非根元素：
• relatice 、static：块级祖先元素
• absolute:非static的祖先元素
• float:块级祖先元素
• Fixed:viewport
• 如果找不到定位的祖先元素，包含块为初始包含块。

 

 

浮动

 

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档    的普通流中的块框表现得就像浮动框不存在一样。

浮动框特点:

• 浮动会从正常的流中消失
• 但是一个元素或图像浮动时，其它内容会环绕该元素。
• 浮动元素的外边距不会合并。（BFC）
• 浮动元素的包含块是其最近的块级祖先元素。
• 浮动会生成块级框，无论这个元素原来是什么
• 浮动的边界不会超过父边界，除了设置负外边距
• 浮动的边界一定是另外一个浮动元素或父元素的边界.
• 浮动不会重叠。(BFC)

 

 

参考：

z-index

http://www.w3.org/community/webed/wiki/CSS/Properties/z-index

position

http://www.w3.org/wiki/CSS/Properties/position

containing block

http://www.w3.org/TR/CSS2/visudet.html#containing-block-details