在前面的帖子中，我们已经讲了可视化模型中布局的两大方面：1. 常规流 2. 浮动，布局3大部分只剩下了绝对定位。前面的帖子中也零星的提到过关于绝对定位的某些特性，但都不够细致系统。
绝对定位（Absolute positioning）
相对包含块偏移定位
在绝对定位模型中，一个框明确地基于它的包含块偏移。不是父元素，这点需注意。
要是人家问你，绝对定位相对于谁定位啊？你很快乐的说：它的父元素。那就显得矬了- -!
专业的说法，相对于包含快定位。所以，绝对定位元素的定位，关键是包含块，什么是包含块？见： 【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之一：包含块(containing block)
完全脱离常规流
它完全脱离了 常规流 （对后继的兄弟节点没有影响）。
这一点又与浮动元素不同，好歹浮动元素会对后继的行框产生影响，而且，后面声明的绝对定位元素也不会受前面定义的绝对元素的影响。
可以这么理解，常规流中的元素，都在同一个层上，浮动是处于常规流之上的一个特殊层，可能会对常规流中的元素有影响。但是绝对定位的元素不会，可以把每个绝对定位的框看做一个单独的图层，独来独往。所以，说它完全脱离了常规流也不无道理。
注意一点，绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流之前在常规流中位置有关。
看这个例子：
中间的DIV在常规流中，影响了后面的绝对定位元素的位置，但是没有受到前面的绝对定位元素的影响。
实际截图：
绝对定位元素生成的包含块
一个绝对定位框会为它的常规流子元素和定位派生元素(不包含 fiexed 定位的元素)生成一个新的包含块。不过，绝对定位元素的内容不会在其它框的周围排列。
至于，为何只为常规流中的子元素还有绝对定位元素生成包含块，就不大了解了……有知道的么？分享一下……
注意，绝对定位框还会创建 block formatting contexts。在IE中则会触发 hasLayout 。
堆叠层次
它们可能会掩盖另一个框的内容，或者被另外一个框掩盖，这取决于互相重合的框的堆叠层次。 也就是我们前面说的三维的可视化模型，除了X轴，Y轴，还有Z轴。
固定定位（Fixed positioning）
固定定位是绝对定位的一个子类。唯一的区别是，对于固定定位框，它的包含块由可是窗口(viewport)创建。对于连续媒介，固定定位框并不随着文档的滚动而移动。从这个意义上说，它们类似于固定的背景图形。对于页面媒介，固定定位框在每页里重复。对于需要在每一页底部放置一个签名时，这个方法非常有用。
注意，在IE6里不支持 Fixed 定位，通常的做法是使用绝对定位，然后用JS控制绝对定位框的位置，来代替固定定位。
W3C官方给出一个使用固定定位布局的例子，为了看起来明显，我给所有的div加了个红色的边框，各位可以自行测试：
效果应该是(来自W3C)：
可视化格式模型概述：
http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196
更多说说标准系列：
绝对定位（Absolute positioning）
相对包含块偏移定位
在绝对定位模型中，一个框明确地基于它的包含块偏移。不是父元素，这点需注意。
要是人家问你，绝对定位相对于谁定位啊？你很快乐的说：它的父元素。那就显得矬了- -!
专业的说法，相对于包含快定位。所以，绝对定位元素的定位，关键是包含块，什么是包含块？见： 【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之一：包含块(containing block)
完全脱离常规流
它完全脱离了 常规流 （对后继的兄弟节点没有影响）。
这一点又与浮动元素不同，好歹浮动元素会对后继的行框产生影响，而且，后面声明的绝对定位元素也不会受前面定义的绝对元素的影响。
可以这么理解，常规流中的元素，都在同一个层上，浮动是处于常规流之上的一个特殊层，可能会对常规流中的元素有影响。但是绝对定位的元素不会，可以把每个绝对定位的框看做一个单独的图层，独来独往。所以，说它完全脱离了常规流也不无道理。
注意一点，绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流之前在常规流中位置有关。
看这个例子：
-
HTML code
-
< div style ="position:absolute; width:100px; height:100px; background-color:red;" > absolute </ div > < div style ="height:50px; border:1px solid blue; width:200px;" > DIV 中的普通文本元素 </ div > < div style ="position:absolute; left:60px; width:100px; height:100px; background-color:green;" > absolute </ div >
中间的DIV在常规流中，影响了后面的绝对定位元素的位置，但是没有受到前面的绝对定位元素的影响。
实际截图：
绝对定位元素生成的包含块
一个绝对定位框会为它的常规流子元素和定位派生元素(不包含 fiexed 定位的元素)生成一个新的包含块。不过，绝对定位元素的内容不会在其它框的周围排列。
至于，为何只为常规流中的子元素还有绝对定位元素生成包含块，就不大了解了……有知道的么？分享一下……
注意，绝对定位框还会创建 block formatting contexts。在IE中则会触发 hasLayout 。
堆叠层次
它们可能会掩盖另一个框的内容，或者被另外一个框掩盖，这取决于互相重合的框的堆叠层次。 也就是我们前面说的三维的可视化模型，除了X轴，Y轴，还有Z轴。
固定定位（Fixed positioning）
固定定位是绝对定位的一个子类。唯一的区别是，对于固定定位框，它的包含块由可是窗口(viewport)创建。对于连续媒介，固定定位框并不随着文档的滚动而移动。从这个意义上说，它们类似于固定的背景图形。对于页面媒介，固定定位框在每页里重复。对于需要在每一页底部放置一个签名时，这个方法非常有用。
注意，在IE6里不支持 Fixed 定位，通常的做法是使用绝对定位，然后用JS控制绝对定位框的位置，来代替固定定位。
W3C官方给出一个使用固定定位布局的例子，为了看起来明显，我给所有的div加了个红色的边框，各位可以自行测试：
-
HTML code
-
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" > < HTML > < HEAD > < TITLE > A frame document with CSS2 </ TITLE > < STYLE type ="text/css" > BODY { height : 8.5in } div { border : 1px solid red ; } /* Required for percentage heights below */ #header { position : fixed ; width : 100% ; height : 15% ; top : 0 ; right : 0 ; bottom : auto ; left : 0 ; } #sidebar { position : fixed ; width : 10em ; height : auto ; top : 15% ; right : auto ; bottom : 100px ; left : 0 ; } #main { position : fixed ; width : auto ; height : auto ; top : 15% ; right : 0 ; bottom : 100px ; left : 10em ; } #footer { position : fixed ; width : 100% ; height : 100px ; top : auto ; right : 0 ; bottom : 0 ; left : 0 ; } </ STYLE > </ HEAD > < BODY > < DIV id ="header" > ... </ DIV > < DIV id ="sidebar" > ... </ DIV > < DIV id ="main" > ... </ DIV > < DIV id ="footer" > ... </ DIV > </ BODY > </ HTML >
效果应该是(来自W3C)：
可视化格式模型概述：
http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196
更多说说标准系列：
原文地址：
http://topic.csdn.net/u/20100826/16/7e8906c3-100c-4c7c-8c40-43c60555c68c.html?51135
663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
