css：box-shadow层级问题-相邻元素背景遮盖了阴影

当box-background元素没有给背景颜色时，box-shadow的阴影可以正常显示

<style>
  .box {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  
  .box-shadow {
    box-shadow: 0 5px 10px -5px #00ff00;
  }

  .box-background {
  
  }
</style>

<div class="box box-shadow">box-shadow</div>
<div class="box box-background">box-background</div>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

当box-background元素给定一个背景色之后，box-shadow的阴影就没有了

<style>
.box {
   height: 100px;
   line-height: 100px;
   text-align: center;
 }
 
 .box-shadow {
   box-shadow: 0 5px 10px -5px #00ff00;
 }

 .box-background {
    /* 增加一个背景色 */
   background-color: #f5f5f5;
 }
</style>

<div class="box box-shadow">box-shadow</div>
<div class="box box-background">box-background</div>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

第一时间想到的是给box-shadow加一个z-index属性，不过没有效果，最终解决是让box-shadow相对定位

<style>
      .box {
        height: 100px;
        line-height: 100px;
        text-align: center;
      }

      .box-shadow {
        box-shadow: 0 5px 10px -5px #00ff00;
        /* 增加一个定位 */
        position: relative;
      }

      .box-background {
        background-color: #f5f5f5;
      }
    </style>

    <div class="box box-shadow">box-shadow</div>
    <div class="box box-background">box-background</div>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

参考
如何解决box-shadow被紧邻的元素遮住

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/124946669