[CSS] 두 컴포넌트 박스를 중첩시켜서 입체적 효과를 주고 싶을 때(가상요소 &::before)

저 핑크색 배경은 대체 어떻게 뒤로 보낼 수 있는 걸까 ? 싶었는데 한나가 알려줬다!

TIP

  // 로그인 폼 뒷 배경
  &::before {
    // before: 부모 요소 앞에 가상의 요소(가상의 html 태그) 생성
    content: "";
    position: absolute;
    top: -1rem; // 부모 요소의 상단 경계 위로 위쪽으로 이동
    left: 0; // 부모 왼쪽 경계에 맞춤춤
    width: 100%;
    height: 50px;
    border: 0.5px solid #8e8e8e;
    border-radius: 1.5rem;
    background-color: #fff0e8;
    transform: scale(0.95); //95% 사이즈
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    z-index: -1; //뒤로 보내기
  }
}