CSS相对|绝对（relative/absolute）定位

1、破坏性和包裹性

position:absolute与float:left，两者有两大共性：包裹性，破坏性。

包裹性

包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。

<div class="fz">
<div class="bg-red">
<p>无absolute</p>
</div>
<div class="abs bg-grey">
<p>absolute后</p>
</div>
</div>

float也是典型的inline-block化元素。

破坏性：

absolute比float的破坏性更强：

浮动的破坏性在于切断line box链，致使高度塌陷，但其占据的实体位置还是在的。

而absolute不仅让高度塌陷，宽度也塌陷。

注意：对于普通页面的布局，不到万不得已不要使用absolute。

absolute尽量不要身陷林立的DOM中，尤其是用来做普通的布局。

2、absolute布局的替代实现

详见《absolute布局的替代实现》

body标签是absolute元素自由的天空，如absolute没有relative属性的限制，其会一直飞到天空的边缘（浏览器窗口）。

把推荐将隐藏的绝对定位元素放在body标签内部，且最底部加载，以提高页面的呈现速度，甚至根本就不加载。

将默认隐藏的绝对定位元素被relative限制在很深的DOM节点中，弊处相当多：

①首先增加了DOM的复杂度，不利于维护；越深的DOM元素，造成了回 流越强；

②因为父标签需要relative限制，增加了CSS代码的消耗量；

③隐藏元素头部加载，延迟了页面的呈现速度；每个下拉几乎都要重新定位，其重用性 受限。

[b]3、absolute之元素隐藏[/b]

详见《css隐藏元素的几种方法》

4、绝对定位等高布局

5、absolute属性与IE6/IE7之间的误会

4、相对定位的最小化影响原则

追加：1、static：如果没有指定position的值，默认为static。源代码中各个标签的先后位置，就是它们所对应的对象的呈现次序

2、relative：保持对象所在文档流中的位置，跟static不同的是可以通过top,left,right,bottom改变自己的位置，这四个属性的取值是相对于文档流的前一个对象，原来呈现的页面仍然会我行我素（即通过设置top等属性，不会影响原来文档流的布局。）

3、absolute：将当前对象拖出文档流独立显示。

4、z-index：元素应用了非static的position属性后，就会有一个隐晦的层级，会居于普通元素之上。 无需额外设置z-index。

relative设置了z-index。一般情况是为改变它的子元素absolute的层级。因为absolute是“拼爹”，对relative本身无影响。

不同relative里面的absolute的层级关系是根据它的父relative层级有关，即“拼爹”，但ie6、7例外，参考以下②。

ie6问题：

①float+relative在面对absolute的时候，无论relative的层级多高都沦陷

.blank{ width: 100%; height: 600px; background-color: #000000; opacity: 0.4; filter:alpha(opacity=40); left: 0; top: 0;}

<div class="blank abs zx1"></div>
<div class="rel zx9">
<img class="l" src=" images/yyy.jpg" width="150" height="150">
</div>

正常效果是：



img层位于blank之上。但在ie6中，float的img+relative。无论relative的层级有多高，都沦陷，位于absolute之下了。

解决办法：1、position:relative改为position:absolute；2、去除浮动；3、浮动元素添加position属性（如relative，absolute等）

②正常浏览器的z-index都是“拼爹”，但是ie6、7是拼该absolute的第一个relative

<div class="blank abs zx2"></div>
<div class="rel zx1">
<div class="rel zx8">
<div class="abs zx1">
<img src="images/yyy.jpg" width="150" height="150">
</div>
</div>
</div>

正常浏览器img位于blank之上，因为blank的层级是zx2，而img所在div（即便它本身才zx1，但它）的爹（rel）的层级是zx8。

ie6,7浏览器不认爹，认它爹的爹rel层级为zx1，小于blank的层级。固效果为：



解决办法：只需改变img所在层的第一个（或者说最老那个爹）relative的层级。

bug:

以上代码在firefox运行，图片仍被遮挡。个人理解是如果abs图片的祖先rel设置了z-index的值，则认祖先的，如果没有设置则认父z-index的。

但是在ie6、7里面不管祖先z-index有没设置都认祖先的。