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

Question

我对 Bootstrap 进行了一些调整(使用自定义 -theme.css 文件)以更改下拉菜单的外观。我从导航栏中删除了边框，在其周围包裹了一个 header ，该 header 设置为固定在顶部(它不适用于内部固定顶部导航栏的 Bootstrap ，但不记得为什么)。

一切正常，只是有时，内容主体中的内容似乎与下拉菜单重叠，如下图所示:

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

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

Answer 1

在阅读了 z-index 的实际工作原理后(作为一名 10 多年的网页设计师.../facepalm)，我尝试将 z-index 添加到 .site-header-class .它奏效了:

代码:

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

结果:

问题是，z-index 仅适用于位置属性已显式设置为 fixed、absolute 或 relative 的元素。/p>