css - 即使位置设置为相对且不透明度设置为 0.99，z-index 也无效

Question

我有一个包含照片的动画幻灯片，但无法通过调整 z-index 值使幻灯片 float 在照片的顶部。我已经尝试过 Philip Watson 描述的工作，他建议改变不透明度值来改变堆叠上下文，但我在实现它时遇到了麻烦。我目前已经将 position 设置为 relative 但 z-index 仍然无效。我的代码可以在这里看到:

http://pastebin.com/NBdV4wsn

和这里运行的幻灯片:

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

感谢您对这个恼人的问题的任何帮助。

Answer 1

您的 z-index 不起作用，因为堆叠上下文仅特定于子项。无论您为父项使用多低的 z-index，子项都将处于它们自己的堆叠上下文中，因此它们永远不会落后于父项。

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

.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。

这是一个概念验证 fiddle :http://jsfiddle.net/teddyrised/pNPm2/