TIL 20211111[航海9957日目]

カードとアイコンが重なる場合のCSS処理

問題の原因
の上の写真では、丸アイコンが赤い枠のように大きく、画面では見えませんが、履歴書divの前にあるので修正しにくいです.また、所定の位置がないため、z-indexは適用されない.

     <Box>
        <DotDiv>
          <DoodleDots />
          <Effect />
        </DotDiv>
        <ProfileDiv>
          <Div>         
  ...생략...
  
const Box = styled.div`
  width: 500px;
  height: 284px;
  margin: 0px auto;
  position: relative;
  z-index: 3;
`;

const DotDiv = styled.div`
  position: absolute;
  left: -50%;
  top: 3%;
  z-index: -1;
`;

const ProfileDiv = styled.div`
  width: 500px;
  height: 284px;
  margin: 62px auto 100px auto;
  background: linear-gradient(
    108.12deg,
    #94d1b5 0%,
    #6cc9a4 9.58%,
    #47c294 18.4%,
    #29bd87 25.62%,
    #33aa90 34.8%,
    #3e9699 44.22%,
    #4982a2 53.95%,
    #546eab 63.57%,
    #6158b5 74.23%,
    #6a47bd 82.13%,
    #7238c4 89.19%,
    #7e22ce 100.01%
  );
  box-shadow: 14px 30px 35px 4px rgba(10, 10, 10, 0.4);
  border-radius: 16px;
  z-index: 100;
  position: relative;
`;