Box Shadow
页面布局中，无论是正常的文档流，还是flex布局，都会让页面铺满盒子。而box-shadow再页面设计中是不可缺少的效果，在单独盒子中的元素，box-shadow的阴影会投影到父级上。但是当阴影盒子是紧贴着，那阴影就会变得不可见。
办法1
在需要的box-shadow的元素设置position: relative
在正常文档流中，紧贴着，意味着元素涂在父级上的阴影被旁边元素覆盖再次涂写，所以设置position: relative就让元素脱离文档流，浏览器单独处理，就出现了z轴上的堆叠，也就不存在被紧贴着，阴影就直接投影在正常文档流之上。
办法2
在父级上设置flex，然后在需要阴影的元素设置z-index大于等于0
flex会让直接子元素变为一种flex-item元素，这个时候就不能称为文档流了，flex-item就有了z轴的概念，所以设置z-index就能调整阴影出现的堆叠层次。
属性
- position
- z-index
- flex
