控制覆盖另一个元素的元素

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

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

#headercontainer {
    z-index: 10;
}

Answer 3

您应该为div设置z-index：

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

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