好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS定位之绝对与相对_html/css_WEB-ITnose

1.static,relative,absolute,fixed含义

static: 元素框正常生成。块级元素生成一个矩形框,作为文档流的

的一部分,行内元素则会常见一个或多个行框,至于其父元素中。

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

absolute: 元素框从文档流中完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素挥着是初始包含块。

元素原先 在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。

元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

fixed: 元素框的表现类似于absolute,不过其包含块是视窗本身。

2.包含块(更像是定义了一个要定位元素的上下文,是定位的重中之重)

(1)根元素的包含块由用户代理创建,在html中,跟元素是html元素,不过有些浏览器会使用body作为根元素。

在大多数浏览器中,初始包含块是一个视窗大小的矩形。

(2)对于一个非根元素来说,如果其position值是relative或static,包含块则由最近的块级框,表单元格或行内块祖先框的内容边界构成。

(或者所包含块就是它自身,自身是其上下文)

(3)对于一个非根元素来说,如果其position值是absolute,包含块设置为最近的position值不是static的 祖先元素(不是兄弟元素) 。

3.偏移属性:top,right,bottom,left(相对于包含块的偏移)

定位元素也就是position不是static的元素。

(1)偏移属性定义元素的大小

尽管有时候元素的尺寸很重要,但是对于定位元素来说则不一定必须要。

下面这个例子中,定位元素就没有指定尺寸,但是效果可以看出它确实有尺寸。

因为这些尺寸将由这些偏移隐含确定计算出。

查看更多关于CSS定位之绝对与相对_html/css_WEB-ITnose的详细内容...

  阅读:40次