谈到CSS的定位机制时都会提到一个关键词“文档流”。那么什么是文档流呢?将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为[size=x-large]文档流[/size]。
CSS的定位机制有3种:[color=blue]普通流、浮动(float:left/right/none)和定位 (position:static/relative/absolute/)[/color]。
普通流中的元素的位置由元素在 (X)HTML 中的位置决定。浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。 详见:[url]http://www.w3school.com.cn/css/css_positioning.asp[/url]
基于文档流, 我们可以很容易理解以下的定位模式:
[u][size=x-large]相对定位relative:[/size][/u]相对于元素在文档流中位置进行偏移. 但保留原占位。相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
[u][size=x-large]绝对定位absolute:[/size][/u]完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移。
[u][size=x-large]固定定位static:[/size][/u]完全脱离文档流, 相对于视区进行偏移。
[u][size=x-large]绝对定位fixed:[/size][/u]元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
position的absolute与fixed共同点与不同点:
A:共同点:
1.改变行内元素的呈现方式,display被置为block;2.让元素脱离普通流,不占据空间;3.默认会覆盖到非定位元素上
B不同点:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。
CSS的定位机制有3种:[color=blue]普通流、浮动(float:left/right/none)和定位 (position:static/relative/absolute/)[/color]。
普通流中的元素的位置由元素在 (X)HTML 中的位置决定。浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。 详见:[url]http://www.w3school.com.cn/css/css_positioning.asp[/url]
基于文档流, 我们可以很容易理解以下的定位模式:
[u][size=x-large]相对定位relative:[/size][/u]相对于元素在文档流中位置进行偏移. 但保留原占位。相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
[u][size=x-large]绝对定位absolute:[/size][/u]完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移。
[u][size=x-large]固定定位static:[/size][/u]完全脱离文档流, 相对于视区进行偏移。
[u][size=x-large]绝对定位fixed:[/size][/u]元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
position的absolute与fixed共同点与不同点:
A:共同点:
1.改变行内元素的呈现方式,display被置为block;2.让元素脱离普通流,不占据空间;3.默认会覆盖到非定位元素上
B不同点:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。