[CSS] 모달 내부 스크롤에 관계없이 고정된 엘리먼트

fixed한 모달창 상단에 닫기 버튼을 만들었는데 스크롤이 되면 보이지 않는 것이 문제였다. position: fixed 속성은 뷰포트에 대한 고정 위치를 나타내므로, 부모 요소 내에서 또 다른 고정 위치를 지정하는 것은 불가능하기 때문.

버튼과 모달을 감싸주는 엘리먼트를 하나 더 만들어 해결했다. 자바스크립트로 높이를 계산해주는 방법도 있겠지만 충분히 CSS로 간단하게 구현할 수 있기 때문.

.Wrapper = {
  position: fixed;
  min-width: 768px;
  width: 50vw;
  max-width: 1280px;
  height: 75vh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 100;
 }

.closeBtn {
    position: absolute;
    top: 20px;
    right: 30px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }

.Box = {
  border-radius: 25px;
  height:100%;
  overflow: auto;
}