How can I move one container to front and the other back using z-index?-CodePudding

I have following layout:

The black and green border one is the

const AudienceCategories = styled(motion.div)`
    position: relative;
    z-index: 1;
    min-height: 650px;
    background-color: ${nativeColors.pitchBlack};
    color: ${nativeColors.white};
    clip-path: polygon(62% 0, 100% 0, 100% 62%, 63% 80%, 0 59%, 0 0);
    margin-bottom: -15vw;
`;

The GreenBorder is defined as:

const GreenBorder = styled(motion.div)`
    position: relative;
    z-index: 1;
    height: 15vw;
    background-color: ${nativeColors.websiteButtonGreen};
    clip-path: polygon(64% 44%, 100% 0, 100% 16%, 64% 58%, 0 16%, 0 0);
`;

And the cards are wrapped in the following container:

const Variants = styled(motion.div)`
    position: relative;
    z-index: 3;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-top: -200px;
    max-width: 1000px;
    width: 60%;
    z-index: 1000;
`;

Card displaying logic (Please note 'AudienceCard' is a different component):

 <Variants>
    {CardVariants.map((card) => (
       <AudienceCard
            key={card.id}
            icon={card.icon}
            label={card.label}
            onClickHandle={() => props.cardClicked(card)}
        />
    ))}
 </Variants>

These items are stacked like this:

            <AudienceCategories/>
            <GreenBorder />

            <Variants>
                {CardVariants.map((card) => (
                    <AudienceCard
                        key={card.id}
                        icon={card.icon}
                        label={card.label}
                        onClickHandle={() => props.cardClicked(card)}
                    />
                ))}
            </Variants>

I want to move the cards (3 bottom ones) in front. For that I increased z-index value for and reduced it for the sibling tag , but unfortunately z-index is not working as expected. Can someone help me in fixing this issue please?

Update This is how I want them to look:

Update-2

AudienceCard Component:

const Container = styled("div")<IContainerProps>`
    position: relative;
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    width: 300px;
    height: 250px;
    border-radius: 10px;
    aspect-ratio: 2;
    background-size: cover;
    margin: 10px;
    cursor: pointer;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background-image: url(${(props) => props.backgroundImage});
`;

const AlignItem = styled('div')`
  text-align: center;
`;

const AudienceCard: React.FC<ICardProps> = props => {
  return (
    <>
      <Container onClick={props.onClickHandle}>
        <AlignItem>{props.icon}</AlignItem>
        <AlignItem>
          <motion.div
            style={{
              display: 'inline-block',
              marginTop: '20px',
              width: '180px'
            }}
          >
            <SubText>{props.label}</SubText>
          </motion.div>
        </AlignItem>
      </Container>
    </>
  );
};

Update-3

.css-yfonvn-Container {
}
* {
    font-family: "Poppins", "Noto Sans TC", sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div {
    display: block;
}
.css-14gcyn0-AudienceCategories {
    position: relative;
    z-index: 1;
    min-height: 650px;
    background-color: #000000;
    color: #ffffff;
    -webkit-clip-path: polygon(62% 0, 100% 0, 100% 62%, 63% 80%, 0 59%, 0 0);
    clip-path: polygon(62% 0, 100% 0, 100% 62%, 63% 80%, 0 59%, 0 0);
    margin-bottom: -15vw;
}
.css-1uh4vqq-HeadBar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 30px;
}
.css-19epom5-GreenBorder {
    position: relative;
    z-index: 1;
    height: 15vw;
    background-color: #1AE1B7;
    -webkit-clip-path: polygon(64% 44%, 100% 0, 100% 16%, 64% 58%, 0 16%, 0 0);
    clip-path: polygon(64% 44%, 100% 0, 100% 16%, 64% 58%, 0 16%, 0 0);
}

.css-zohono-Variants {
    position: relative;
    z-index: 3;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    -webkit-justify-content: space-evenly;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-top: -200px;
    max-width: 1000px;
    width: 60%;
}

.css-llycxv-Container {
    position: relative;
    z-index: 3;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 300px;
    height: 250px;
    border-radius: 10px;
    aspect-ratio: 2;
    -webkit-background-size: cover;
    background-size: cover;
    margin: 10px;
    cursor: pointer;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    background-image: url();
}

<div >
  <div >
  </div>
  <div ></div>
  <div >
    <div >
      <div ><svg width="109" height="87" viewBox="0 0 109 87" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="65.9961" cy="43.0039" r="43.0039" fill="#FFF7AD"></circle>
          <path d="M75.0535 16.4725V59.3159C75.0535 60.9745 74.3945 62.5653 73.2219 63.7387C72.0486 64.9114 70.4576 65.5703 68.799 65.5703H6.25445C4.59584 65.5703 3.005 64.9114 1.83159 63.7387C0.658883 62.5655 0 60.9745 0 59.3159V40.5525C0 39.8617 0.560113 39.3016 1.25089 39.3016C1.94167 39.3016 2.50178 39.8617 2.50178 40.5525V59.3159C2.50178 60.311 2.89715 61.266 3.60078 61.9695C4.30441 62.673 5.25939 63.0685 6.25438 63.0685H68.7989C69.7941 63.0685 70.749 62.6731 71.4525 61.9695C72.156 61.2658 72.5515 60.3109 72.5515 59.3159V16.4725C72.5515 15.4774 72.1562 14.5224 71.4525 13.8189C70.7489 13.1154 69.7939 12.7199 68.7989 12.7199H6.25438C5.25926 12.7199 4.30428 13.1153 3.60078 13.8189C2.89728 14.5225 2.50178 15.4775 2.50178 16.4725V21.4761H66.6103C67.3011 21.4761 67.8612 22.0362 67.8612 22.7269C67.8612 23.4177 67.3011 23.9778 66.6103 23.9778H2.50178V32.1086H66.6103C67.3011 32.1086 67.8612 32.6687 67.8612 33.3595C67.8612 34.0503 67.3011 34.6104 66.6103 34.6104H1.25089C0.560113 34.6104 0 34.0503 0 33.3595V16.4732C0 14.8146 0.658955 13.2237 1.83159 12.0503C3.00485 10.8776 4.59584 10.2188 6.25445 10.2188H68.799C70.4576 10.2188 72.0485 10.8777 73.2219 12.0503C74.3946 13.2236 75.0535 14.8146 75.0535 16.4732V16.4725ZM65.0463 48.9957C65.0463 45.7841 61.4768 43.8357 58.7729 45.5836C61.4265 49.9339 58.2853 55.5629 53.1629 55.5629C51.421 55.5629 49.7509 54.871 48.519 53.6397C47.2876 52.4078 46.5958 50.7375 46.5958 48.9958C46.5958 43.6058 52.7626 40.5193 57.0719 43.7219C61.4014 40.5209 67.5481 43.6169 67.5481 48.9958C67.5481 50.7376 66.8562 52.4078 65.6249 53.6397C64.393 54.871 62.7227 55.5629 60.981 55.5629C60.2902 55.5629 59.7301 55.0028 59.7301 54.312C59.7301 53.6212 60.2902 53.0611 60.981 53.0611C62.0593 53.0611 63.0929 52.6328 63.8558 51.8705C64.618 51.1077 65.0463 50.0741 65.0463 48.9958L65.0463 48.9957ZM57.2282 48.9957C57.2282 47.9173 56.7999 46.8837 56.0376 46.1209C55.2748 45.3586 54.2412 44.9303 53.1628 44.9303C52.0845 44.9303 51.0509 45.3586 50.2881 46.1209C49.5258 46.8837 49.0975 47.9173 49.0975 48.9957C49.0975 50.074 49.5258 51.1076 50.2881 51.8704C51.0509 52.6327 52.0845 53.061 53.1628 53.061C54.2412 53.061 55.2748 52.6327 56.0376 51.8704C56.7999 51.1076 57.2282 50.074 57.2282 48.9957ZM11.4141 46.3375H21.8903C22.5811 46.3375 23.1412 45.7774 23.1412 45.0866C23.1412 44.3958 22.5811 43.8357 21.8903 43.8357H11.4141C10.7234 43.8357 10.1632 44.3958 10.1632 45.0866C10.1632 45.7774 10.7234 46.3375 11.4141 46.3375ZM11.4141 54.1556H21.8903C22.5811 54.1556 23.1412 53.5955 23.1412 52.9047C23.1412 52.2139 22.5811 51.6538 21.8903 51.6538H11.4141C10.7234 51.6538 10.1632 52.2139 10.1632 52.9047C10.1632 53.5955 10.7234 54.1556 11.4141 54.1556Z" fill="black"></path>
        </svg></div>
      <div >
        <div style="display: inline-block; margin-top: 20px; width: 180px;"><span >Likely to apply for Credit Cards</span></div>
      </div>
    </div>
    <div >
      <div ><svg width="105" height="83" viewBox="0 0 105 83" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="63.5742" cy="41.4258" r="41.4258" fill="#FFD4AD"></circle>
          <path d="M78.1498 33.2921L40.2609 5.14995C39.7357 4.75884 39.0145 4.75884 38.4883 5.14995L0.600772 33.2921C-0.0584135 33.7821 -0.196846 34.7127 0.2937 35.3729C0.783698 36.0321 1.71374 36.17 2.37455 35.68L6.90806 32.3127V48.1556C6.90806 48.9763 7.57329 49.6432 8.39504 49.6432C9.21627 49.6432 9.88258 48.9769 9.88258 48.1556L9.88203 30.1049L39.3756 8.19811L68.8705 30.1063V64.2911H51.2754V38.4581C51.2754 37.6368 50.609 36.9711 49.7878 36.9711H28.9625C28.1413 36.9711 27.4749 37.6363 27.4749 38.4581V64.2911H8.39477C7.57354 64.2911 6.90779 64.9574 6.90779 65.7786C6.90779 66.5993 7.57302 67.2656 8.39477 67.2656H70.3575C71.1787 67.2656 71.8445 66.5993 71.8445 65.7786V32.3152L76.3764 35.682C76.6429 35.8797 76.9538 35.9758 77.2614 35.9758C77.7168 35.9758 78.1645 35.7682 78.4567 35.3749C78.9467 34.7157 78.8083 33.7841 78.1491 33.294L78.1498 33.2921ZM30.4508 39.9422H48.3019V64.2888H30.4508V39.9422Z" fill="black"></path>
          <path d="M46.3275 25.8811C46.3275 22.0468 43.209 18.9272 39.3753 18.9272C35.5415 18.9272 32.423 22.0463 32.423 25.8811C32.423 29.7148 35.5415 32.8338 39.3753 32.8338C43.209 32.8338 46.3275 29.7141 46.3275 25.8811V25.8811ZM35.3967 25.8811C35.3967 23.687 37.1819 21.9018 39.3754 21.9018C41.5689 21.9018 43.3541 23.687 43.3541 25.8811C43.3541 28.0751 41.5694 29.8592 39.3754 29.8592C37.1813 29.8592 35.3967 28.075 35.3967 25.8811Z" fill="black"></path>
          <path d="M46.125 54.8965C46.125 56.0166 45.2164 56.9252 44.0963 56.9252C42.9757 56.9252 42.0676 56.0166 42.0676 54.8965C42.0676 53.7759 42.9756 52.8678 44.0963 52.8678C45.2164 52.8678 46.125 53.7758 46.125 54.8965Z" fill="black"></path>
        </svg></div>
      <div >
        <div style="display: inline-block; margin-top: 20px; width: 180px;"><span >Likely to get a Mortgage</span></div>
      </div>
    </div>
    <div >
      <div ><svg width="100" height="84" viewBox="0 0 100 84" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="58.2645" cy="41.7356" r="41.7355" fill="#ADFAFF"></circle>
          <path d="M34.5687 64.9746H2.76516V56.5122C2.78044 48.1179 9.58171 41.3163 17.9753 41.3009H25.4701C26.234 41.3009 26.853 40.6818 26.853 39.9184C26.853 39.1545 26.234 38.5355 25.4701 38.5355H17.9753C8.05406 38.5507 0.0142229 46.59 0 56.512V66.3573C0 67.1208 0.619015 67.7398 1.38246 67.7398H34.5692C35.3331 67.7398 35.9521 67.1207 35.9521 66.3573C35.9521 65.5934 35.3331 64.9744 34.5692 64.9744L34.5687 64.9746Z" fill="black"></path>
          <path d="M13.2747 45.3387C10.9324 46.449 8.95554 48.2046 7.5777 50.4001C7.38232 50.7112 7.31935 51.0876 7.40269 51.4459C7.48556 51.8038 7.70779 52.114 8.01984 52.308C8.24531 52.4423 8.50458 52.5094 8.76664 52.5015C9.23564 52.496 9.67084 52.2575 9.92827 51.8654C11.0255 50.1162 12.5992 48.7157 14.4637 47.8278C14.8123 47.694 15.0897 47.4217 15.2309 47.0763C15.3725 46.7309 15.3651 46.3425 15.2105 46.0027C15.0563 45.6448 14.7582 45.3688 14.3892 45.2425C14.0206 45.1161 13.616 45.1512 13.2748 45.3388L13.2747 45.3387Z" fill="black"></path>
          <path d="M24.1706 33.6961H25.2211C31.9923 33.6808 37.473 28.1875 37.473 21.4171V16.4113C37.473 9.64063 31.9926 4.14764 25.2211 4.13224H24.1706C17.3888 4.13224 11.8915 9.62973 11.8915 16.4113V21.4171C11.8915 24.6737 13.1851 27.797 15.488 30.0999C17.7909 32.4023 20.9142 33.6964 24.1709 33.6964L24.1706 33.6961ZM14.6567 16.4106C14.672 11.1627 18.9226 6.91245 24.1706 6.89716H25.2211C30.4649 6.91244 34.7072 11.1672 34.7072 16.4106V21.4163C34.7072 26.6596 30.4649 30.9145 25.2211 30.9298H24.1706C18.9227 30.9145 14.672 26.6643 14.6567 21.4163V16.4106Z" fill="black"></path>
          <path d="M51.162 26.7826C42.8709 26.7826 35.3971 31.7786 32.2266 39.4398C29.0561 47.1008 30.8145 55.917 36.681 61.7756C42.5479 67.6343 51.3661 69.3806 59.0227 66.2004C66.6796 63.0197 71.6657 55.5388 71.6538 47.2472C71.6385 35.9403 62.4677 26.7817 51.161 26.7817L51.162 26.7826ZM51.162 64.9746C41.3717 64.9746 33.4344 57.0376 33.4344 47.247C33.4344 37.4563 41.3713 29.5193 51.162 29.5193C60.9527 29.5193 68.8896 37.4558 68.8896 47.247C68.8896 51.9486 67.0219 56.4576 63.6977 59.7821C60.373 63.1068 55.864 64.9745 51.1626 64.9745L51.162 64.9746Z" fill="black"></path>
          <path d="M51.1621 44.4818H53.264C54.0279 44.4818 54.6469 43.8623 54.6469 43.0989C54.6469 42.335 54.0279 41.7159 53.264 41.7159H52.545V40.8863C52.545 40.1228 51.9259 39.5038 51.162 39.5038C50.3986 39.5038 49.7796 40.1228 49.7796 40.8863V41.9928C48.5253 42.5553 47.7146 43.7984 47.7054 45.173C47.7054 47.0823 49.2532 48.6301 51.162 48.6301C51.3528 48.6301 51.5356 48.7056 51.6708 48.8403C51.8056 48.9755 51.881 49.1584 51.881 49.3491C51.8662 49.7353 51.5486 50.0408 51.162 50.0404H49.0878C48.3244 50.0404 47.7054 50.6594 47.7054 51.4233C47.7054 52.1868 48.3244 52.8058 49.0878 52.8058H49.7795V53.6354C49.7939 54.3929 50.4046 55.0036 51.162 55.0184C51.9259 55.0184 52.5449 54.3994 52.5449 53.6354V52.5294C53.8154 51.996 54.6432 50.7543 54.6468 49.3764C54.6543 48.4477 54.2903 47.5541 53.6362 46.8948C52.9815 46.235 52.0912 45.8642 51.162 45.8642C50.7805 45.8642 50.4707 45.5549 50.4707 45.1729C50.4707 44.791 50.7805 44.4817 51.162 44.4817L51.1621 44.4818Z" fill="black"></path>
          <path d="M51.162 33.7518C43.7122 33.7671 37.6835 39.816 37.6942 47.2659C37.7044 54.7158 43.7496 60.748 51.2 60.7433C58.6504 60.7385 64.6868 54.6971 64.6868 47.247C64.6715 39.7887 58.6212 33.7506 51.1632 33.7506L51.162 33.7518ZM51.162 58.0611C45.2395 58.0458 40.4495 53.2349 40.4597 47.312C40.4699 41.3895 45.2766 36.5953 51.199 36.6004C57.1215 36.6055 61.9203 41.408 61.9203 47.3305C61.9051 53.2613 57.0929 58.0611 51.1619 58.0611H51.162Z" fill="black"></path>
        </svg></div>
      <div >
        <div style="display: inline-block; margin-top: 20px; width: 180px;"><span >Likely to open up a CASA</span></div>
      </div>
    </div>
    <div >
      <div ><svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M87 43.0039C87 66.7543 67.7465 86.0078 43.9961 86.0078C20.2457 86.0078 0.992188 66.7543 0.992188 43.0039C0.992188 19.2535 20.2457 0 43.9961 0C67.7465 0 87 19.2535 87 43.0039Z" fill="#FFBCAD"></path>
        </svg></div>
      <div >
        <div style="display: inline-block; margin-top: 20px; width: 180px;"><span >Spend frequently at Japanese Restaurants in Central</span></div>
      </div>
    </div>
    <div >
      <div ><svg width="83" height="83" viewBox="0 0 83 83" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="41.5742" cy="41.4258" r="41.4258" fill="#F4ADFF"></circle>
        </svg></div>
      <div >
        <div style="display: inline-block; margin-top: 20px; width: 180px;"><span >Those who Enjoy going to Staycations</span></div>
      </div>
    </div>
    <div >
      <div ><svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="42.2645" cy="41.7356" r="41.7355" fill="#44DDBC" fill-opacity="0.53"></circle>
        </svg></div>
      <div >
        <div style="display: inline-block; margin-top: 20px; width: 180px;"><span >Those who Purchases from Online Stores</span></div>
      </div>
    </div>
  </div>
  <div ></div>
</div>

Update-4 Codepen link if you prefer that:

https://codepen.io/raffaysajjad/pen/ExEBYZj

CodePudding user response：

Answer is actually pretty simple.

Your box-shadow in .css-llycxv-Container makes it seem like there is a background color, but in reality the box is transparent. Simply set a white background on that class and the box will appear correctly.