防止一个元素覆盖另一个元素

Question

我有一个固定的标题。当我滚动时，某些元素会覆盖标题。我该如何防止这种情况？

Answer 1

我可以立即想到两个解决方案。您可以为 #headercontainer 元素指定 z-index CSS property...

#headercontainer {
    /* ... other CSS ... */
    z-index: 1000;
}

...或者您可以按照我认为应该完成的方式进行...

#headercontainer {
    /* ... other CSS ... */
    position: fixed;
    top: 0px;
}

#contentcontainer {
    /* ... other CSS ... */
    margin-top: 125px; /* this should be at least the height of the header */
}

在第二个解决方案中，您不必担心哪个元素悬停在哪个其他元素上。 #contentcontainer 元素正确下推到 #headercontainer 元素下方，以便它们没有重叠。

Answer 2

您应该为 div 设置 z-index：

#headercontainer {
    z-index:1;
}
#contentcontainer {
    z-index:-1;
}

添加上述行应该使标头优先于内容容器。

Answer 3

为 #headercontainer 提供更高的 z-index：

#headercontainer {
    z-index: 10;
}