前些天写一个模仿虎牙网站幻灯片的插件,期间遇到我一直都没注意到的问题,就是z-idnex会失效的问题。
我是将幻灯片的左右按设置为float浮动的,然后在调试点击的时候发现无论怎么调高z-index都没有作用,后来将浮动元素改为position:absolute就可以了。在网上我查找了一些资料,z-index的失效问题有这么几种情况:
- 父标签 position属性为relative;
-
问题标签无position属性(不包括static);
-
问题标签含有浮动(float)属性。
解决的方法就是将position设置为absolute
还有就是IE6、7下出现的问题就忽略吧。