即使位置设置为相对且不透明度设置为 0.99，Z 指数也无效

Question

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

http://pastebin.com/NBdV4wsn

以及此处运行的胶片：

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

感谢您对这个令人愤怒的问题的任何帮助。

Answer 1

z 索引不起作用，因为堆叠上下文仅特定于子项。无论您为父项使用的 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/