z-index not working with blur effect in styled component

Question

I am trying to use the blur effect in css to blur the background and z-index to stack the logo on the blurred image but the same is not happening my logo is down under the blurred background.Please let me know the issue. Styled component heirarchy:

    <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

Remember z-index only works on positioned elements (relative, absolute, sticky, fixed).