CSS z-index似乎没有反应

Question

我正在制作一个页面，我试图在画布周围和后面创建彩色条带的错觉。

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

对于画布（下面链接中的.footer-container）我设置position：relative和z-index为2，对于“后面”图层我设置position：absolute和z-index为1并且对于“in-front”层我做了同样的事情，但z-index为3。

但无论我做什么，我似乎无法将任何照片都放在画布后面。目前这两个IMG嵌套在画布的div中，但我也尝试过相同的程序。此外，我在同一页面上的另一个地方做了类似的事情并且它有效 - 我真的无法理清我做错了什么？

以下是实施的链接：

http://dl.dropbox.com/u/706446/SFB%20html%20mockups/z-index-problem.html

谢谢！

Answer 1

我找到了解决方案：

不要在div#footer-container上设置z-index。 将div.footer-stripes_back的z-index设置为-1。 您可以删除div.footer-stripes_front的z-index，这不是必需的，您可以保留DOM结构。 适用于Chrome。

Answer 2

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

#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; }