记录我工作学习生活中的点点滴滴......

css3里position:fixed时z-index有时候会失效
发布于 Html&Css
2016-05-25 15:24:33
2333
206

开发微站时发现一个bug,在小米的微信webview里面,当元素被设为position:fixed时,z-index有时候会失效。

测试了一下,发现是因为有些元素使用了-webkit-animation。

这是怎么一回事呢?当两个元素都设为position:fixed时,再给他们设z-index,这时,层级就不是按照正常的大者为上了。

而是先看看谁有-webkit-animation这个属性,哪个有就哪个为上。如果两个都有,这是才以正常层级划分。

先别急,除了是否有-webkit-animation这个属性之外,里面必须有渐变属性

@-webkit-keyframes name{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}

像上面的代码,虽然从0%-100%都没有变化,可是却不能省掉,不然就当做没有-webkit-animation属性一样,沉下去了。

18:00修正 @zhy 这个是因为做CSS3动画时 层级会被默认提高,保证在可见层级上。 如遇到不作动画的元素需要覆盖在上面 我经常都是加个-webkit-transform:translateZ(0)




分享本文到:
除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:Pakey's BLog >>Html&Css >>css3里position:fixed时z-index有时候会失效
本文地址:http://www.pakey.net/blog/css-postition-fixed-z-index-not-use.html