css - z-index 不适用于样式化组件中的模糊效果

Question

我正在尝试使用 css 中的模糊效果来模糊背景，并使用 z-index 将 Logo 堆叠在模糊的图像上，但同样的事情没有发生我的 Logo 在模糊的背景下。请让我知道这个问题. 样式化的组件层次结构:

    <LandingPageContainer>
      <Background />
      <LandingPageContentContainer>
        <Logo src={piattoLogo} />
        <ContentContainer>
          <Content>Premium handcrafted delicacies</Content>
          <Button>Lets go!</Button>
        </ContentContainer>
      </LandingPageContentContainer>
    </LandingPageContainer>

import styled from 'styled-components';

import landingBackground from '../../../../../img/piatto/CustomerLanding/CustomerLanding.jpg';

export const LandingPageContainer = styled.div`
  display: block;
  width: 100%;
  height: 812px;
  background-color: #0d0c0c;
`;

export const Background = styled.div`
  width: 390px;
  height: 526px;
  left: -326px;
  top: -80px;
  filter: blur(2px);
  background: url(${landingBackground}) no-repeat center center/cover;
`;

export const LandingPageContentContainer = styled.div`
  display: block;
  margin: auto;
  padding: auto;
  text-align: center;
  margin-top: -130px;
  z-index: 2;
`;

export const Logo = styled.img`
  width: 201px;
  height: 164px;
`;


`;

Answer 1

记住 z-index 仅适用于定位元素(相对、绝对、粘性、固定)。