Html cssz-index似乎没有响应

我在一个页面上工作，我试图创造一个彩带缠绕在画布周围和后面的幻觉

为此，我将图形导出为两个图像-一个位于画布后面，另一个位于画布前面

对于画布（.footer container在下面的链接中），我设置了position:relative，z-index为2；对于“behind”层，我设置了position:absolute，z-index为1；对于“in-front”层，我做了同样的事情，但z-index为3

但无论我做什么，我似乎都无法让我的任何照片进入画布后面。目前，这两个IMG嵌套在画布的div中，但我也尝试了相同的过程。另外，我在同一页的另一个地方做了一件类似的事情，效果很好——我真的不知道我做错了什么

以下是实现的链接：

谢谢

我找到了一个解决方案：

不要在

div#footer容器

上设置z索引。 将

div.footer-stripes\u back

的z索引设置为-1。 您可以删除

div.footer-stripes\u front

的z索引，这不是必需的，您可以保持DOM结构不变。

---

在Chrome中对我有效。

很难看到结果，因为容器没有背景

#footer-top {
  background:#fff;
  position:relative;
  z-index:3; }

#footer-back {
  background:#fff;
  position:relative;
  z-index:3; }

.footer-stripes_front {      
  position:absolute;      
  z-index:4; }

.footer-stripes_back {      
  position:absolute;      
  z-index:2; }

---

我认为问题在于，包装div#footer容器的z索引为2。将图像放在div之外，此时可能无法测试，但请尝试：从

页脚容器中删除定位，将
页脚条纹设置回
z-index
为
-1
。那应该有用。。。或者只是重新排列你的元素（例如，将第一张图片放在div之外）是的！它起作用了！谢谢你的迅速回复。我也一直在玩弄负值，但我从未尝试过从#页脚容器中删除z-index…有人能解释为什么带有z-index:-1的图像跳到带有z-index:2的容器前面吗？这是因为外部容器定义了最小值。因此，如果您的外部容器具有z-index 4，那么您的内部元素只响应z-index值>=4。可能是这样，但当它很容易修复时，我认为不满足这些读者的需求是愚蠢的。IE7虽然质量低劣，但仍然是市场上最常见的浏览器之一。我们可以讨论一下，但是这款浏览器已经有6年的历史了，根据这个（）它在现代网络中不可用。