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布局的替代实现
body标签是absolute元素自由的天空,如absolute没有relative属性的限制,其会一直飞到天空的边缘(浏览器窗口)。
把推荐将隐藏的绝对定位元素放在body标签内部,且最底部加载,以提高页面的呈现速度,甚至根本就不加载。
将默认隐藏的绝对定位元素被relative限制在很深的DOM节点中,弊处相当多:
①首先增加了DOM的复杂度,不利于维护;越深的DOM元素,造成了回 流越强;
②因为父标签需要relative限制,增加了CSS代码的消耗量;
③隐藏元素头部加载,延迟了页面的呈现速度;每个下拉几乎都要重新定位,其重用性 受限。
3、absolute之元素隐藏
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有没设置都认祖先的。