内容正文重叠下拉菜单中的图像

Question

我稍微调整了Bootstrap（使用自定义-theme.css文件）来更改下拉菜单的外观。我从导航栏中删除了边框，在其周围包裹了一个标题，该标题设置为固定在顶部（它没有使用bootstraps内部固定顶部导航栏，但不记得为什么）。 / p>

这一切都很好，有时，内容正文中的内容似乎与下拉菜单重叠，如下图所示：

这是我用于导航栏周围<header>标记的代码：

.site-header {
    border-bottom: solid 1px #e1e1e1;
    height: 52px;
    position: fixed;
    top: 0;
    display: block;
    width: 100%;
}

Answer 1

在阅读了z-index实际如何运作之后（作为现在超过10年的webdesigner ...... / facepalm），我尝试在.site-header - 类中添加z-index。它起作用了：

代码：

.site-header {
    border-bottom: solid 1px #e1e1e1;
    height: 52px;
    position: fixed;
    top: 0;
    display: block;
    width: 100%;
    z-index: 9999;
}

结果：

问题是，z-index仅适用于其position属性已明确设置为fixed，absolute或relative

的元素