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
absolute
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
relative就是对默认static定位的相对偏移,也就是说如果top、left都设0,那么此时的relative就跟static基本相同了,否则的话就在static的基础上进行相对偏移。relative的一个重要用处是给设置绝对定位的子元 素确定一个“父容器”。相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
生成绝对定位的元素,相对于 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定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。
包含块
怎么确认一个元素的包含块?
- 根元素:
- 根元素包含块由用户代理建立。在html中,根元素是html 元素,有些浏览器的也会用body做为根元素。大多数浏览器中,初始包含块是一个视窗大小的矩形。
- 非根元素:
- relatice 、static:块级祖先元素
- absolute:非static的祖先元素
- float:块级祖先元素
- Fixed:viewport
- 如果找不到定位的祖先元素,包含块为初始包含块。
浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档 的普通流中的块框表现得就像浮动框不存在一样。
浮动框特点:
- 浮动会从正常的流中消失
- 但是一个元素或图像浮动时,其它内容会环绕该元素。
- 浮动元素的外边距不会合并。(BFC)
- 浮动元素的包含块是其最近的块级祖先元素。
- 浮动会生成块级框,无论这个元素原来是什么
- 浮动的边界不会超过父边界,除了设置负外边距
- 浮动的边界一定是另外一个浮动元素或父元素的边界.
- 浮动不会重叠。(BFC)