如何为Header添加Drop Shadow及处理HeaderImg层级优先级问题

嘿，刚接触编程遇到这种样式和层级问题太正常啦，我当初刚学CSS的时候也踩过类似的坑，来一步步帮你解决～

一、给Header加上Drop Shadow（解决box-shadow没生效的问题） #

你说直接给header加box-shadow没效果，大概率是这两个原因：

• 你的header没有设置背景色：如果header是透明的，阴影会显示在内容背后，看起来就像没生效（毕竟你要的是白色框的阴影，得先有白色框呀）
• header不是块级元素：如果设置了display: inline，box-shadow只会围绕文字，不会覆盖整个白色区域

直接用下面的CSS代码试试，我给你写了注释：

header {
  background-color: white; /* 必须有这个，白色框的底色，阴影会围绕这个框显示 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 四个参数分别是：水平偏移、垂直偏移、模糊半径、阴影颜色，你可以随便调数值 */
  padding: 1rem; /* 给里面的链接留点空间，不然文字会贴在框的边缘 */
  display: block; /* 确保是块级元素，默认header标签已经是block，保险起见加上 */
}

如果还是没效果，检查下有没有其他CSS规则覆盖了这个box-shadow（比如父元素的overflow: hidden会把阴影裁掉），或者header的高度是不是0？如果内容是inline元素，可能需要给header加个min-height，或者让内容撑开高度。

二、处理Header和下方图片的层级问题 #

因为CSS不是图层式软件，元素的层级是由z-index和position属性控制的，很简单就能让header压在图片上面：

1. 给header加上position: relative（z-index只有在元素有position属性时才生效，relative是最常用的，不会改变元素的正常布局）
2. 给header设置一个比图片高的z-index值（默认元素的z-index是0，所以只要设成1以上就行）

代码示例：

header {
  /* 保留上面的background、box-shadow、padding等属性 */
  position: relative;
  z-index: 10; /* 这个数字只要比图片的z-index大就行，图片没设置的话默认是0，10完全够用 */
}

/* 下方的图片元素，比如你用的是img标签，类名叫header-img */
.header-img {
  /* 如果图片没设置position和z-index，默认层级是0，会在header下面 */
  /* 要是图片设置了z-index，比如z-index:5，那你把header的z-index改成6就行 */
}

这样不管怎么滚动或者布局，header都会稳稳地在图片上面，阴影也能正常显示啦。

内容来源于stack exchange