TIL 20211111[航海9957日目]

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

悩ましい問題.円のアイコンが表示された場合、[修正](Modify)ボタンは押しにくくなります

問題の原因
の上の写真では、丸アイコンが赤い枠のように大きく、画面では見えませんが、履歴書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;
`;

z-indexを使用するにはstaticのほかに位置を与えます.
基準divの相対位置を与え,基準divの絶対移動divを与えた.次に、一番前のdiv最大のz-index値を与えます.
今回のプロジェクトCSSで一番すごい部分は私のページカードプロファイル部分だと思います.カードの背景色はグラデーションで、しかも何よりもカードの背景に効果があるので、横にも丸を飾ります.グラデーションは思ったより早く解決され、カードの背景効果にも丸があるので、簡単に位置を調整できます.カードプロファイルと重なるだけで、この部分を解決するのに少し時間がかかりましたが、z-indexで解決しました.デザイナーさんがちょっと難しいかもしれないと言っていた部分を解決して完成した部分を見せてくれましたが、よくできていたので満足して褒められたので嬉しかったです😭 おかげさまで、機能が低下するにつれて自信が少し回復しました!😂