开发微站时发现一个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)