Question

我的目标是使用:before和z-index防止盒子阴影在附近元素的顶部重叠。

但是由于z-index，影子会出现在投射它的列表项的容器下面。

如果其父容器只是body。

，它可以正常工作

是否有关于此的解决方法或我应该更改我的HTML和CSS

HTML（PUG）

div#main
  ul
    li
    li
    li

CSS（手写笔）

#main
  background-color lightyellow
  height 300px
  width 300px

ul
  padding 10px

  li
    background-color lightblue
    height 50px
    width 50px
    margin 10px
    position relative

  &::before
    content ''
    box-shadow 0px 0px 15px 20px rgba(0,0,0,0.5)
    position absolute
    top 0px
    right 0px
    bottom 0px
    left 0px
    z-index -1

Answer 1

您正在使用绝对定位的 pseudo元素而未将position: relative设置为其父级，即为什么导致此类问题的原因您还没有设置一些基本< em> CSS 规则可获得更好的结果：

代码段

html,
body {
  margin: 0;
  padding: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#main {
  background-color: lightyellow;
  height: 300px;
  width: 300px;
}
ul {
  padding: 10px;
  margin: 0;
  position: relative;
}
ul li {
  background-color: lightblue;
  height: 50px;
  width: 50px;
  margin: 10px;
  position: relative;
  overflow: hidden;
}
ul li::before {
  content: '';
  box-shadow: 0px 0px 15px 20px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
  width: 100%;
  height: 1px;
}

<div id="main">
  <ul>
    <li>List01</li>
    <li>List02</li>
    <li>List03</li>
  </ul>
</div>

Answer 2

我找到了答案，我不知道这是否是最好的方式

HTML（PUG）

ul
  li
    div.content
      span All
  li
    div.content
      span By
  li
    div.content
      span Myself
  li
    div.content
      span ANYMORE!!!

CSS（STYLUS）

body
  margin 15px

ul
  display inline-block

li
  width 120px
  height 50px

.content
  background-color lightyellow
  border 1px solid rgba(0,0,0,0.85)
  widows 100%
  height 100%
  position relative

  &::after
    box-shadow 0px 0px 15px 5px rgba(0,0,0,0.5)
    position absolute
    top 0
    right 0
    left 0
    bottom 0
    content ''
    z-index -1

  span
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)

使用时不会出现CSS - box-shadow：before和z-index

2 个答案:

代码段