如何设置CSS背景图实现滚动时header头部固定不被背景覆盖

问题原因 #

你遇到的覆盖问题本质是层叠顺序问题：未设置明确z-index的固定定位元素，和DOM结构在它之后的普通元素同属一个层叠上下文时，后续元素会默认叠在固定定位元素上方。

解决方案 #

只需要在#title-bar的CSS规则中新增z-index属性，将它的层叠优先级设置为高于其他页面元素即可，修改后的代码如下：

#title-bar{
  background-color: #9E9D89;
  padding-top: 25px;
  padding-bottom: 15px;
  overflow:  visible;
  position: fixed;
  width: 100%;
  z-index: 999; /* 新增这一行即可，数值只要大于其他元素的z-index即可 */
}

z-index属性用于控制同一个层叠上下文中元素的堆叠顺序，数值越大的元素越靠近用户、显示层级越高。

内容的提问来源于stack exchange，提问作者Ayush Kumar