在webkit每晚构建和chrome canary上,每个位置固定的元素似乎都获得了超高的z-index值,无论它是内联还是CSS文件中给出的内容.
有关示例,请访问http://nick-evans.com.
您认为这是这些测试版中的错误,还是我的代码中的错误？
我在我的例子中可以想到的唯一原因是在使用jQuery tmpl加载页面之后渲染了较低的元素(这是对伪延迟加载的尝试).
.horizontal-carousel将显式z-index设置为1并设置为position:fixed,同时.col设置为z-index:9除了第一个section元素的内容之外的所有内容都具有相反的关系,因此轮播中的图像覆盖了它们的描述.
UPDATE
它发生在我身上,未经明确的代码会有所帮助.这是一个链接
它是由您添加的CSS 3D Transform引起的.horizontal-carousel.事实上,在" webkit transform translate3d " 之后的 " css z-index丢失 "之前,似乎有人遇到了类似的问题.
无论是你的错还是他们的错,我都不确定.我在规范中找到的唯一与此相关的是:
变换的"none"以外的任何值都会导致堆叠上下文和包含块的创建.该对象的行为就像position:relative已被指定,但也充当固定位置后代的包含块.转换元素的Z轴上的位置不会影响堆叠上下文中的顺序.对于具有相同z-index的元素,按照增加z位置的顺序绘制对象.
解决问题的最简单方法是更改to 的z值.但是现在看起来你实际上并没有真正使用变换.我不知道如果你真的开始用这些变换做这件事,那是否会奏效.translate3d-1px
摆弄变换及其父元素的元素的z-index 也可能有所帮助,但可能需要进行一些其他更改.
| 归档时间： |
|
| 查看次数： |
1682 次 |
| 最近记录： |