我有一个包含照片的动画胶片,但是无法通过调整z索引值使胶片浮动在照片的顶部。我已经尝试了Philip Watson所描述的变通方法,他建议更改不透明度值来更改堆栈上下文,但是我在实现它时遇到了麻烦。我目前已将位置设置为相对,但是z-index仍然无效。
我的代码可以在这里看到:

http://pastebin.com/NBdV4wsn

幻灯片在这里运行:

http://www.streetpics.co.uk/testingground.html

感谢您对这个令人发指的问题的帮助。

最佳答案

您的z-index不起作用,因为堆叠上下文仅特定于子代。不管您为父级使用的z索引有多低,子级都将处于其自己的堆叠上下文中,因此它们永远不会落后于父级。

但是,您始终可以在父容器中创建一个psedo元素(以使其与图像位于同一堆叠上下文中),并将其覆盖在图像上:

.film_strip:after {
    background-image: url([filmstrip.gif]);
    background-repeat: repeat-x;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}


因此,您将不再需要为任何内容指定z-index(是的!)。

绝对位置时,强制伪元素扩展到父元素的完整尺寸的技巧是将顶部,左侧,底部和右侧坐标指定为0。

这是一个概念证明小提琴:http://jsfiddle.net/teddyrised/pNPm2/

关于css - 即使将位置设置为相对并且将不透明度设置为0.99,z索引也无效,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19035937/

10-12 12:25
查看更多