如何在背景上的 .overlay class 上正确定义高度？

Question

这太疯狂了。我有一个叠加层 class (.color-overlay)，它在主滑块上运行良好。但我无法让它在联系部分工作。如果我将 class 设置为 "position: absolute" 它会在接触部分起作用，但高度和 z-index 会变得混乱

http://clients.fariadesign.com/effiebourne/#contact-area

任何帮助将不胜感激！ 谢谢！

Answer 1

如果您将 position: absolute 添加到 .color-overlay，只需将 position: relative 添加到 #contact-area。这样 .color-overlay 将保留在 #contact-area 中。但是我看不出有什么乱七八糟的 z-indexes

Answer 2

我在开发人员工具中测试的快速修复：添加以下内容css：

section#contact-area{
    position:relative;
}

和

div.color-overlay{
    position:absolute;
}

和

#contact-area .container {
    position: relative;
}

注意：如果您希望一个元素在另一个元素中是position:absolute，则容器必须是position:relative。否则它将是 window 的绝对值。 如果你想使用 z-index，同样如此：你必须将元素设置为 position:relative/absolute/fixed