今天在做个人项目的时候遇到一个box-shadow不生效（或者说是被遮盖）的问题，在解决之后发现了问题的来由，因为工作中需要用到css的地方比较少，造成了遗忘性比较高的现象，所以决定记录下来，巩固一下基础。
情况大概如下图所示，header的下边框设置了阴影，但是最终能看到的只是框起来的部分，于是带着疑问开始了探索
我写了一个demo来表示页面结构
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
height: 600px;
.header {
background-color: seashell;
display: flex;
align-items: center;
height: 60px;
text-align: start;
padding-left: 20px;
font-weight: 600;
font-size: medium;
box-shadow: 0px 5px 3px 2px blue;
.left{
width: 200px;
height: 600px;
float: left;
background-color: burlywood;
.right{
margin-left: 200px;
height: 600px;
background-color: pink;
</style>
</head>
<div class="header">header</div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
这段代码呈现出来的结果如下图：
看到这个现象，第一时间是打开控制台，检查样式是否生效，查看之后发现已经生效（这里就不贴图了，生效了就是了）。
既然已经生效了，我又想到一个理由：那就是被下面的元素遮盖住了，这个时候给下面的div添加一个margin-top，确定了是被遮住的原因。
那既然是下面的元素遮住了阴影，我就给header加了z-index，但是依然不行，查看了一下控制台发现z-index已经生效
于是我带着疑问开始搜索z-index,关于他的具体属性，这里就不赘述了，可以通过MDN中关于z-index的描述了解
这里先给出解决办法：z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示，所以给header一个非static的position定位即可
最终效果如下图
原因及扩展
这个问题产生的根本原因是：如果页面中的元素没有给定position:relative/fixed/absolute，那么给定的z-index不会生效，那么页面中元素的图层堆叠顺序是按照书写顺序进行排列,如果我们把header放到最下面并给它设置上边框，可以看到，如果container没有给定位，header的阴影是会覆盖到container的下边框部分的，如下图
至于left把阴影覆盖掉了，这是因为float层叠顺序中的优先级高于正常的流式布局
扩展学习：
在CSS中，能让z-index生效的除了position以外，还有
opacity：当opacity不为1和0时，z-index会生效
flex：当父元素为flex时，子元素设置z-index会生效
以下是demo：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
display: flex;
.container {
height: 600px;
.header {
background-color: seashell;
display: flex;
align-items: center;
width: 100vw;
height: 60px;
text-align: start;
padding-left: 20px;
font-weight: 600;
font-size: medium;
box-shadow: 0px 5px 3px 2px blue;
z-index: 100;
.left {
width: 200px;
height: 600px;
float: left;
background-color: burlywood;
.right {
margin-left: 200px;
height: 600px;
background-color: pink;
</style>
</head>
<div class="parent">
<div class="header">header</div>
</div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
本人刚转行的菜鸡一枚，如果有问题，还请各位大佬多多指正，感谢阅读。
