CSS z-index 仅用于阴影

Question

我试图将圆形按钮悬停过渡期间创建的阴影与div（红色）重叠，以便脓包效果不会显示在我的div上，而是显示在其他地方。
这是我的代码：

body {
  background: #292f33;
  text-align: center;
  color: #FFF;
  font-family: sans-serif;
}
.btntest {
  width: 190px;
  padding: 4px;
  border-radius: 5px;
  background: red;
  color: white;
  z-index: 299;
  position: fixed;
}
.button {
  position: fixed;
  z-index: 300;
  left: 10px;
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 1);
}
.button:hover {
  animation: pulse 1.1s ease-out;
  animation-iteration-count: infinite;
}
@keyframes pulse {
  0% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  25% {
    z-index: 298;
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
  }
  49.9% {
    z-index: 298;
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
  }
  50% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  75% {
    z-index: 298;
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
  }
  99.9% {
    z-index: 298;
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
  }
  100% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
}
@-webkit-keyframes pulse {
  0% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  25% {
    z-index: 298;
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
  }
  49.9% {
    z-index: 298;
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
  }
  50% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  75% {
    z-index: 298;
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
  }
  99.9% {
    z-index: 298;
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
  }
  100% {
    z-index: 298;
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
}

<p>Pulse Effect</p>
<a class="button"></a>
<div class="btntest">Test</div>

我已经为过渡阴影提供了 z-index 属性，但每次我悬停时，按钮也会隐藏在div 下方 - 我只想隐藏阴影。我怎样才能做到这一点？

Answer 1

正如@connexo所说，元素的阴影始终与其元素处于同一z-index级别。
一种可能的解决方法是创建一个其他隐藏元素，该元素将位于较低的层上，在悬停真实按钮时进行动画处理：

body {
  background: #292f33;
  text-align: center;
  color: #FFF;
  font-family: sans-serif;
}
.btntest {
  width: 190px;
  padding: 4px;
  border-radius: 5px;
  background: red;
  color: white;
  z-index: 299;
  position: fixed;
}
.button {
  position: fixed;
  z-index: 300;
  left: 10px;
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 1);
}
.fake-btn {
  position: fixed;
  z-index: 298;
  left: 10px;
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0;
  background: rgba(255, 255, 255, 0);
}
.button:hover + .fake-btn {
  animation: pulse 1.1s ease-out;
  animation-iteration-count: infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  25% {
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
  }
  49.9% {
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
  }
  50% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  75% {
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
  }
  99.9% {
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
}
@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  25% {
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
  }
  49.9% {
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
  }
  50% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
  75% {
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
  }
  99.9% {
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
  }
}

<p>Pulse Effect</p>
<a class="button"></a>
<p class="fake-btn"></p>
<div class="btntest">Test</div>

Answer 2

你不能

让它以这种方式工作。元素的阴影将始终堆叠在与具有阴影的元素相同的 z 索引级别上。