z-index 사용하기 : 사진 위로 겹치기

#문제 상황:

가끔 두 사진을 겹쳐서 사용하고 싶을 때가 있다.
이를 위해서는 z-index를 이용하면 되는데
우선순위를 정하면 한 사진이 다른 사진 위로 올라온다.

이 두 사진을 이용해 볼 예정이다.

# 결과물 및 전체 코드

import styled from "styled-components";
function App() {
  return (
    <Img>
      <img
        className="ImgTv"
        src="https://velog.velcdn.com/images/jntantmsemt/post/a3087f12-0390-4c57-84f7-1e61ba54d7ee/image.png"
        alt="티비"
      />
      <img
        className="ImgSpBob"
        src="https://velog.velcdn.com/images/jntantmsemt/post/d5c3396e-ec8f-4801-854b-cda884437c96/image.png"
        alt="스펀지밥"
      />
    </Img>
  );
}

export default App

const Img = styled.div`
.ImgTv{
  transform:translate(200px,50px);
  position:relative;
  z-index:1;
}
.ImgSpBob{
  transform:translate(15px,114px);
  position: absolute;
  z-index:2;
  width:125px;
  height:80px;
}
`;

1. 스펀지밥 사진은 위로, 티비 사진은 아래로 가게끔 하기 위해
   위로 가는 사진의 z-index 수를 더 크게 한다.

2. position을 relative와 absolute로 정한다.
   

   relative?
   요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.

   z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. table-*-group, table-row, table-column, table-cell, table-caption 요소에 적용했을 때의 작동 방식은 정의되지 않았습니다.

   absolute?

   요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.

   z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. 절대 위치 지정 요소의 바깥 여백은 서로 상쇄되지 않습니다.

   출처: mdn | https://developer.mozilla.org/ko/docs/Web/CSS/position

3. 위에서는 transform으로 했지만, 반응형 및 여러 조건을 고려하여
   사진이 이동하게끔 한다.