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

Question

I'm using these style lines. Please check why header is showing below page content? http://gtcgroups.com/ This is the website kindly tell me what i should do?

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

Answer 1

You have a z-index:20 in your code.

You can use a z-index:21; on your header to make it appears above the page content.

Answer 2

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

Answer 3

z-index is used to define stack order of html elements. HTML elements with greater stack order is always in front of an element with a lower stack order.

header{
    z-index: 9999;
}

It will increase page header stack order than page content stack order.

Answer 4

Make sure that your Fixed header z-index value is greater than z-index of the other sections

for example,

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

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).

Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning.