css absolute和float，relative，z-index的同异

标签：tom   塌陷   abs   相对   strong   hidden   属性   垂直   维护   

大神占楼：

简书作者：张歆琳

http://www.jianshu.com/p/a3da5e27d22b

摘录：

float是欺骗父元素，让其父元素误以为其高度塌陷了，但float元素本身仍处于文档流中，文字会环绕着float元素，不会被遮蔽。

absolute（层级高）其实已经不能算是欺骗父元素了，而是出现了层级关系。

一旦给元素加上absolute或float就相当于给元素加上了display:block;，就可以给元素定宽width了。

未指定left/top/right/bottom的absolute元素，其在所处层级中的定位点就是正常文档流中该元素的定位点。

多一个属性意味着多一层维护。

CSS里有个细节值得关注：用absolute的left: 0;right: 0;top: 0;bottom: 0;来实现全屏拉伸，对于absolute元素来说，如果同时设置left和right会水平拉伸，同时设置top和bottom会垂直拉伸。那为何不设width/height为100%呢？代码都贴给你了，可以自己试试。算了告诉你答案吧，前面说了，不设top/right/top/bottom的话absolute会从正常文档流应处的位置开始定位，因此做不到全屏。除非你设置width/height为100%后，同时再设left: 0; top: 0;。

推荐的是absolute控制隐藏和显示。方法当然相当简单，如absolute+ top:-9999em，或absolute + visibility:hidden。

在父元素 中设置相对定位属性，子元素中设置绝对定位属性。绝对定位脱离文档流，需设置定位信息。

css absolute和float，relative，z-index的同异

标签：tom   塌陷   abs   相对   strong   hidden   属性   垂直   维护   

原文地址：http://www.cnblogs.com/CarolHuang/p/6066165.html