将固定位置的div置于最前

Question

我在网页中使用了fixed position来将一个div固定在页面顶部作为页眉，但是在滚动时，它会被其他对象遮挡，如divs、视频甚至文本！以下是一个示例图：

当滚动时，该div会隐藏：

因此，我想到了一种基本的结构，即先编写特定div的代码（我已经这样做了），然后再编写其他对象的代码，其他对象就会自然地出现在前面。所以，一种解决方法是将其代码编写在最后。但是，我的结构化代码中有适当放置的注释，这可能会破坏它。

<div style="width: 1409.25px; height:40px; top:0; left:0; position:fixed; background-color:black; line-height:2;">..Text here..</div>

有没有办法在滚动时将

提到前面，而不必在结尾处编写其代码？

- Kashish Arora

---

你尝试过使用 z-index 吗？ - Sammy

Answer 1

你需要添加一个 z-index，这将根据 z-index 的值将 div 放入 z 空间中，

例如：

<div id="a" style="z-index:10"></div>
<div id="b" style="z-index:1"></div>

Div a将会被放置在Div b的上面，因为它具有更高的z-index。

这里是一个简单的JSFiddle示例-https://jsfiddle.net/ta2gbn4m/

- Matt Hammond

---

z-index 起作用了。我以为我需要将它放在所有 div 上，就像你提到的索引 10 一样。但是只放在一个上就行了。其余的 div 我不需要调整，因为只有一个重叠在另一个上。 - Kashish Arora

@Error404，adarsh 的意思是，如果你把导航放在一个 header 标签内，并设置 header 的 z-index，它将把标签内的所有内容都设置为该 z-index，而不是设置每个 div 的 z-index，并且它会自动将内容设置为在编辑内容的 z-index 上节省时间。 - Matt Hammond

Answer 2

为您的页眉设置z-index值，比下面的div包装器高。

例如：

 header{
  position:fixed;
  width:100%;
  z-index:9999
}
div{
position:relative;
z-index:2 // lesser then the header z-index value
}

z-index值越高，元素就会覆盖那些z-index值较低的元素。

- Adarsh Gowda K R