Z-index 不适用于绝对定位元素

Question

I am trying to accomplish the design that's shown in the image. However, z-index is not working on the absolute elements when I am trying to put them behind the cards. What am I doing wrong here? Does it have to do with the flex parent or something?

FYI - I am using styled components for styling

---

const CardWrapper = styled.div`
  display: flex;
  position: relative;
  z-index: 0;
`;

const CardWrapLeftIcon = styled.div`
  position: absolute;
  top: -80px;
  left: -230px;
  z-index: 1;
`;

const CardWrapRightIcon = styled.div`
  position: absolute;
  top: -220px;
  right: -300px;
  z-index: 1;
`;

const Card = styled.div`
  z-index: 2;
  position: relative;
`;

<CardWrapper>
  <CardWrapLeftIcon>
    <img src="/images/image.svg" alt="Card wrap left icon" height={320} width={460} />
  </CardWrapLeftIcon>
  <CardWrapRightIcon>
    <img src="/images/image.svg" alt="Card wrap right icon" height={480} width={421} />
  </CardWrapRightIcon>

  <Card>
    <h4>Card 1</h4>
  </Card>

  <Card>
    <h4>Card 2</h4>
  </Card>

  <Card>
    <h4>Card 3</h4>
  </Card>
</CardWrapper>

Answer 1

The problem here should be that it's not in the same z-index context (see more in this article .) You can wrap all the absolute elements in a div, and then make that parallel to the div containing the cards. Set the z-index of that div to be lower than the div containing the cards.

ie

<div style="z-index:1;">
   Cards.
</div>
<div style="z-index:0; position: absolute;">
   <img style="position: absolute";>
   ...
</div>