css写阴影被后边元素遮挡

最新推荐文章于 2024-07-29 19:45:00 发布

就酱酱

最新推荐文章于 2024-07-29 19:45:00 发布

阅读量3.8k

点赞数 3

分类专栏：前端文章标签： css 阴影 box-shadow

本文链接：https://blog.youkuaiyun.com/zqyzqy22/article/details/97908373

版权

前端专栏收录该内容

25 篇文章

订阅专栏

css写阴影被后边元素遮挡

如图，给div1设置阴影，最下边被下边的div2遮挡
在这里插入图片描述

<div class="list">div1</div>
<div class="list2">div2</div>

.list {
  color: black;
  width: 400px;
  height: 300px;
  margin: auto;
  box-shadow: 0 0 15px 8px red;
}
.list2 {
  color: #fff;
  width: 400px;
  height: 300px;
  margin: auto;
  background: black;
}

解决方法：
给设置阴影的元素设置定位，并设置高层级

.list {
  color: black;
  width: 400px;
  height: 300px;
  margin: auto;
  box-shadow: 0 0 15px 8px red;
  position: relative;
  z-index: 100;
}
.list2 {
  color: #fff;
  width: 400px;
  height: 300px;
  margin: auto;
  background: black;
}