[CSS] z-index

팝업창 퍼블리싱을 진행하던 중 배경 div와 팝업창 modal의 순서가 바뀐 걸 발견했다.

 

이를 해결하기 위해 z-index를 사용하였는 데 적용이 안 되는 것 같아서 아래 블로그들을 참고하여 해결했다.

HTML DIV tag: 영역 겹치기와 보이기 순서 지정하는 방법 - Position, z-index

CSS / z-index / 요소의 수직 위치 정하는 속성

 

과정은 아래와 같다.

 

첫번째 시도

A div를 부모로 두고, B div를 자식으로 둔 상태에서 z-index를 사용하였다.

const Parent = styled.div`
  width: 50%;
  z-index: 0;
  
  & .child1 {
    z-index: 1;
  }
`;

적용이 되지 않았다. 😱

 

두 번째 시도

블로그들을 살펴보니 div를 부모, 자식 관계로 두는 게 아니라 형제 관계의 div들의 순서를 조정하는 것 같았다.

const Parent = styled.div`
  width: 50%;
  
  & .child1 {
    z-index: 1;
  }

  & .child2 {
    z-index: 2;
  }
`;

부모 div로 child1, child2라는 자식 div를 묶고, 형제(sibling) 관계에 있는 두 div에 z-index를 사용하여 순서를 조정 하였다. 😊