[웹디자인기능사]팝업레이어 구현하기

팝업레이어 구현하기

팝업레이어 포인트

.bg {
  display: none;
  position: absolute;
  z-index: 1;
  /* 생략 */
}

.popUp {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* 생략 */
}

• 뒷 배경과 팝업레이어에 z-index값을 주어 가장 앞에 위치하도록 해야함
• 뒷 배경보다 팝업레이어의 z-index값이 더 커야함
• 뒷 배경과 팝업레이어 모두 position: absolute 적용
• 팝업 레이어를 화면의 정중앙에 오게 하려면top: 50%, left: 50%, transfrom: translate(-50%, -50%)적용하면 됨

transfrom: translate(-50%, -50%)를 주는 이유

팝업 레이어에 top: 50%, left: 50% 만 주게 된다면 아래 그림처럼 팝업레이어의 왼쪽 상단 꼭지점이 top: 50%, left: 50% 위치에 위치하게된다.

이 상태에서 transfrom: translate(-50%, -50%)를 주게 된다면, 요소(팝업레이어)를 기준으로 z축에서 -50%, y축에서 -50%씩 이동하게 되어 정 중앙에 위치하게 된다.