为什么我的页面固定标题覆盖页面内容下方？

Question

我正在使用这些样式线。请检查标题为何显示在页面内容下方？ http://gtcgroups.com/这是网站好心告诉我我应该怎么做？

.header-normal .site-header.fixed-on  {
    background: #383780;
    opacity: 0.9;
    height: 130px;
}

Answer 1

您的代码中有一个z-index:20。

您可以在标题上使用z-index:21;，使其显示在页面内容上方。

Answer 2

在您的CSS中添加z-index：21或更多，它将起作用

Answer 3

z-index用于定义html元素的堆栈顺序。具有较高堆栈顺序的HTML元素始终位于具有较低堆栈顺序的元素的前面。

header{
    z-index: 9999;
}

它将比页面内容堆栈顺序增加页面标题堆栈顺序。

Answer 4

确保固定标头的z-index值大于其他部分的z-index

例如，

list

CSS中的z-index属性控制重叠元素的垂直堆叠顺序。如图所示，哪一个似乎在物理上离您更近。 z-index仅影响位置值不是静态值（默认值）的元素。

没有任何z-index值，元素按照它们在DOM中出现的顺序堆叠（在同一层次结构级别中最低的元素显示在顶部）。具有非静态定位的元素将始终显示在具有默认静态定位的元素的顶部。