我正在尝试创建一个界面，让您显示和隐藏同一图像的图层。我有一组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上）
也许是因为图像加载速度？
这可以完成还是设计有问题我应该合成服务器上的图像并将新图像发送给客户端？
谢谢！
答案 0 :(得分：1)
我认为问题在于您定义z-order而不是z-index
此外，要使这种技术起作用，z索引应该彼此不同。
答案 1 :(得分：0)
除非您需要更改图层的顺序，否则您不需要使用z-index（至少在代码中是正确的）。浏览器应按照它们在HTML中出现的顺序绘制图层，这意味着div中的最后一个图像将显示在顶部。
如果您确实使用z-index，请记住，那些z-indices较大的元素将出现在z-indices较小的元素之上。
要添加的其他内容：如果定位有问题，请确保在包含div上设置position: relative;。