使用z-index css正确分层元素？

Question

在此页面上http://londonsitedesign.co.uk/code/basic.html我试图将图片放在全屏幻灯片放映上方，但在我的标题后面。图像是白色渐变。我已经为图像指定了样式z-index：0，它将它放在背景前面，但它覆盖了标题。它如何位于标题和背景之间？

我注意到标题中的菜单位于图像上，但是头部中的其余元素位于白色渐变图像的后面。为什么元素分层存在这种差异？

感谢您的任何建议。

安吉拉

Answer 1

您需要将position:relative添加到#header（以及z-index但未指定position的任何其他元素：

#header {
    height: 157px;
    background-color: #FFF;
    z-index: 5;
    position: relative;
}

Answer 2

这应该做你想要的：

.container_24 {position: relative; z-index: 10;}

它也会阻止页脚的淡出，我不认为你想要的。