1

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

http://pastebin.com/NBdV4wsn

和这里运行的幻灯片：

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

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

4

1 回答 1

0

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

但是，您始终可以在父容器中创建一个 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/

于 2013-09-26T18:44:33.533 回答