|
在ie6 7中会遇到绝对定位的元素被相邻原色挡住的情况，看下边这个例子： 绝对定位被相对定位挡住 示例代码尝试了Html5，运行代码框未能成功引入生成标签的js。如果使用ie9以下浏览器，请将代码拷出新建页面测试（见谅）。 在ie6 7浏览器中可以清楚看到问题。默认的所有定位的元素z-index值都为0，后边的优先级高于前面z-index值相同的元素。例子中2个article是同级相对定位元素，z-index都为0。这里我们设置了第一个artile的子元素div为绝对定位并设置z-index:1，但这个div还是被第二个z-index为0的artile挡住了。解决办法是将第一个相对定位的artile元素的z-index设置的值比第二个artile元素高级可（绝对定位的DIV可以不设置了）。 实际问题可能比这个复杂。假如还是这个例子，程序循环出来20条（可能更多）内容，每条内容里边都有一个鼠标经过才显示的层（层宽度很大，会挡住相邻元素）。或许你说把所有相对定位的父元素的z-index值设置为逐一降低，那如果其中绝对定位的子元素把左右的父层都遮住的情况又不好解决了。我的解决办法是动态改变相对定位的父层的z-index（样式中不需要设置了，都默认为0），例如鼠标经过时候把this或者this的父级设置为z-index=1，鼠标移出再改成0级可。 做这类鼠标经过显示层的项目还遇到一个ie6的BUG。看下边这种结构的写法。 <article> article元素是相对定位的，div开始隐藏鼠标经过才显示的绝对定位元素。加上鼠标经过js后，ie6在div显示的时候会错一下位，解决办法把绝对定位的元素作为父元素的第一个子元素 |
发表回复