position属性设置元素的定位方式,为要定位的元素定义定位规则。
position属性主要有四种:static、relative、absolute、fixed。
static是默认属性。使得该元素正常表现,即元素处于文档流中它当前的布局位置,top,bottom,right,left,z-index属性无效。
relative:设置这个关键字并不会改变布局。
absolute:不为元素预留空间,元素通过指定与其最近的非static定位的祖先元素的偏移来确定。绝对定位可以设置外边距,而且不会和其他边距合并。
fixed:不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间,并且该元素的位置在屏幕滚动时不会发生改变。
相对定位(position: relative)的元素仍然被认为是处于文档流之中。相比之下,绝对定位(position: absolute)的元素则被认为脱离了文档流。绝对定位元素的位置是相对于他最近的定位祖先元素(position值非static)。如果没有这样一个祖先元素,则相对于原始的容器。
对于相对定位元素,top和bottom属性指定它相对正常位置的垂直偏移
,left和right属性
指定水平偏移。
对于绝对定位元素,top和bottom等属性指定元素与其包含块的偏移,即此时位置为与包含块的相对位置。元素的边距(margin)定位在这些偏移之中。
float属性
float 是 css 的定位属性。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了。绝对定位的元素不会影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着。
fload属性有四个可用的值:Left 和Right 分别浮动元素到各自的方向,None (默认的) 使元素不浮动,Inherit 将会从父级元素获取float值。
清除Float
清除(clear)是浮动(float)的相关属性。一个设置了清除Float的元素不会如浮动所设置的一样,向上移动到Float元素的边界,而是会忽视浮动向下移动。如下图。
上例中,侧栏向右浮动,并且短于主内容区域。页脚(footer)于是按浮动所要求的向上跳到了可能的空间。要解决这个问题,可以在页脚(footer)上清除浮动,以使页脚(footer)待在浮动元素的下面。
1 #footer { clear: both; }
清除(clear)也有4个可能值。最常用的是 both,清楚左右两边的浮动。left 和 right 只能清楚一个方向的浮动。none 是默认值,只在需要移除已指定的清除值时用到。inherit 应该时第五个值,不过 IE 不支持。只清除左边或右边的浮动,实际中很少见。