大神占楼:
简书作者:张歆琳
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。
在父元素 中设置相对定位属性,子元素中设置绝对定位属性。绝对定位脱离文档流,需设置定位信息。
时间: 2024-10-19 19:44:53