添加新div标签后header的box shadow（盒子阴影）消失如何解决

问题原因 #

你设置的box-shadow: 0 0 5px #000是无位置偏移的全方向模糊阴影，阴影的下半部分会投射在header元素外部的下方区域。而紧跟在header后的.notice元素带有实色背景，在默认正常文档流排版下，.notice的顶部和header的底部完全贴合，直接覆盖了header向下投射的阴影，所以视觉上会出现阴影消失的错觉。

修复方案 #

这里提供两种常用的修复方式，可根据你的布局需求选择：

• 方案1：拉开元素间距，露出阴影区域
  给header添加底部外边距，数值不小于阴影的模糊半径即可，示例代码如下：

header {
  /* 保留原有所有属性，新增以下代码 */
  margin-bottom: 5px;
}

如果不想在header下方留空隙，也可以选择方案2。

• 方案2：调整元素层级，让阴影浮在上层
  给header设置相对定位和更高的层级，让header的阴影覆盖在后续元素上方，示例代码如下：

header {
  /* 保留原有所有属性，新增以下代码 */
  position: relative;
  z-index: 1;
}

内容的提问来源于stack exchange，提问作者Satyajit Roy