css - z-index 没有按预期工作，父组件的 box-shadow 应该略高于 span

Question

我正在尝试关注这个YouTube 视频（网址带有时间戳）。

我面临的问题是，当我将z-index属性添加到span元素上时，它会从圆形父容器中消失。

我在这里做错了什么？

这是我所拥有的：

export default function Spinner() {
  return (
    <Container>
      <Loader>
        <Span />
        <Span />
        <Span />
        <Span />
        <Span />
      </Loader>
    </Container>
  );
}

const Loader = styled.div`
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 4px solid #f1f1f1;
  border-radius: 50%;
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
    10px 10px 10px rgba(0, 0, 0, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 1),
    inset 10px 10px 10px rgba(0, 0, 0, 0.1);
`;

const Span = styled.span`
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  z-index: -1; // <-- this is the part that makes the span elements disappear
  filter: blur(20px);
`;

我在这里复制了它：

编辑：我尝试z-index将父级上的元素增加10并制作元素，但它看起来像这样： z-index: 9span

它应该是这样的：

标签： cssreactjsstyled-components