技术文程序员Web前端之路

top与bottom的优先级

2015-10-28  本文已影响829人  乘着风

绝对定位想必前端都用过吧?用top或者bottom来设置他们的相对父容器(最近一代的相对定位的父容器)偏移量。

那你会不会同时使用top和bottom呢?效果会如何?什么情况下利用这样的方法?

这是一个看起来无理取闹却发人深思的问题。经测试,在chrome, firefox下:

当绝对定位的元素中top,bottom都有值得时候,top优先,而且bottom加!important也“敌不过”top,(战无不胜的!important竟然还有对手?其实,可以理解成:浏览器解释代码的时候发现top和bottom同时存在,就放弃解释bottom,那么bottom的属性值也就不会被解释,就是说!important没上场与其作战)。同理,另外一对儿left和right,是left优先。

特殊情况:如果元素没有设置高度,top,bottom会同时生效!现象很奇怪,同时生效的结果就是元素被拉长。有经验的同事说他利用过这样的特性来解决奇葩的CSS难题,但是想不起来了,以后有机会我会补充的,另外,有问题或建议可以联系我,谢谢。

上一篇下一篇

猜你喜欢

热点阅读