Question

我的网站顶部有一个div，它是100％宽，处于绝对和固定的位置。它的代码如下：

div.header{
    height: 60px;
    width: 100%;
    position: absolute;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #eeeeee;
}

现在一切正常，但当用户向下滚动时，网站内容会显示在此后面。有没有办法阻止这种情况发生？

Answer 1

删除position: fixed;

它应该像

div.header{
    height: 60px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #eeeeee;
}

如果你想修复它而不是删除position:absolute。两者都无法合作。

您同时拥有position:absolute和fixed，但fixed会覆盖该位置，因为它位于绝对位置之后。

现在，如果你想在其他元素之上出现任何元素并且它有一个位置：绝对或固定你可以使用z-index，更高的z-index元素将掩盖更低的z-index元素。

Answer 2

需要在前面显示的div元素应该比需要在后面的元素具有更高的z-index值。

例如

div.header{
....
....
z-index:9999;
}

div.normal{
....
....
z-index:9998;
}

在我的website上，我有一个总是出现在底部的div页脚。我使用以下代码 - 它可能在将来派上用场，或者用于搜索类似查询的人。

#bottom
{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    z-index: 999;
    background-color: rgb(30,122,212); 
    border-top:3px solid black;
    border-bottom:1px solid black;
    -moz-box-sadow: 0 0 10px white; 
    box-shadow: 0 0 10px white;
}

我希望这会有所帮助。

Answer 3

这是一个愚蠢的问题。只需从您的班级中删除position: fixed;媒体资源即可。

如何使DIV元素不透明

3 个答案: