css - 在 CSS 中分层图像

Question

我正在尝试创建一个界面，让您可以显示和隐藏同一图像的图层。我有一组 png 图像，我希望它们都占据相同的空间，并简单地显示和隐藏每一层所代表的 div。

当我使用绝对位置和 z 顺序时，我仍然看到图像以不正确的顺序呈现。

<img src="a.png" style="position:absolute;left:0px;top:0px;width:300px;z-order:-1" /> 
<img src="b.png" style="position:absolute;left:0px;top:0px;width:300px;z-order:1"/>
<img src="c.png" style="position:abslute;left:0px;top:0px;width:300px;z-order:1" />

在此示例中，图像似乎总是掩盖图像 b。 (至少在 Chrome 上)

可能是图片加载速度的问题？

这可以完成吗？还是有问题的设计，我应该在服务器上合成图像并将新图像发送到客户端？

谢谢!

Answer 1

我认为问题在于您正在定义 z-order 而不是 z-index

此外，要使该技术发挥作用，z-index 应该彼此不同。