文档流, 指的是元素排版布局过程中, 元素会自动从左往右, 从上往下的流式排列. 并最终窗体自上而下分成一行行, 并在每行中按从左到右的顺序排放元素. 让元素脱离文档流的方法有: 浮动和定位.
相对于元素在正常情况下出现在页面文档流的位置, CSS 提供了几种方法来定位.
1, 静态定位 (static) 表示按照正常定位方案, 元素盒按照在文档流中出现的顺序依次格式化;
2, 相对定位 (relative) 将移动元素盒, 但是它在文档流中的原始空间会保留下来;
3, 绝对定位 (absolute) 是指元素盒彻底从文档流中脱离出来, 并相对于其容器块进行定位. 因为这些元素从文档流中脱离出来, 所以它们不再影响周边元素的布局, 并且它们占据的空间不被保存;
4, 固定定位 (fixed) 与绝对定位类似, 元素从文档流中脱离, 但是它们不是相对于容器块定位, 而是相对于视口 (viewpoint) 定位(大多数情况下, 这个视口就是指浏览器窗口).
元素的容器块:
1, 根元素 (html) 创建的容器块叫做 "初始化容器块"(有些浏览器将初始化容器块放在 body 元素). 初始化容器块的长方形盒子填充了浏览器窗口视口的大小. 如果没有其他容器块, CSS 就使用初始化容器块;
2, 对于被设置为静态或者相对定位的非根元素, 容器块是它最近的块级元素, 表格单元的内容区的边缘;
3, 对绝对定位的非根元素, 容器块是它最近的不是静态定位的祖先元素.
相对定位元素有如下几个基本特征:
1, 使用 CSS 样式规则 {position:relative;} 声明;
2, 使用一到多个偏移属性 (top,right,bottom,left) 相对于它们在正常文档流中的初始位置进行定位. 没有设置偏移属性的, 默认被设置为 auto;
3, 在文档流中所占据的原始空间被保留;
4, 可能会覆盖其他元素.
绝对定位元素有如下几个基本特征:
1, 使用 CSS 样式规则 {position:absolute;} 声明;
2, 使用一到多个偏移属性 (top,right,bottom,left) 相对于其容器块的边缘进行定位. 没有设置偏移的, 默认被设置为 auto. 偏移值应用于元素盒的外边缘(如果有 margin 值的话, 就包括 margin 值);
3, 绝对定位的元素完全从文档流中脱离出来. 该元素在正常文档流中所占据的空间不保留, 并且它不再影响其他元素(例如, 文本不会围绕它).
来源: http://www.css88.com/qa/css3/12371.html