🌟 모달: 사용자 사진 위에 따라다니는 말풍선 모달

트위터 헤더 네비의 유저 프로필 사진을 클릭하면 로그아웃하는 모달창이 뜬다.
브라우저의 넓이를 조절했을 때도 프로필 위를 졸졸졸 따라오는 말풍선 모달을 구현해 보았다.

여기서 핵심은 감싸고 있는 요소의 position!

0. 현재 이 모달 구조는 .header 안에 작성되어 있고 .header는 posion: relative;이다.

1. 상위 요소인 .modal-layout는 초록색 백그라운드 컬러 부분으로 모달 창 바깥 부분 전체를 덮는 역할을 한다.
   position: fixed;와 높은 z-index 값으로 모달이 브라우저 화면 최상단에 위치할 수 있게 하는 역할을 한다.

2. 그리고 그 안에 위치한 요소인.modal-layout-inside는 파란색 백그라운드 컬러 부분으로 모달 창의 위치를 조정하는 역할을 한다.
   position: fixed;와 top: 68%로 모달 창의 위치를 전체적으로 아래 쪽으로 내려 주었다.

3. 또 그 안에 위치한 요소인 .modal-logout은 헤더에 찰싹 달라붙는 역할을 한다.
   position: sticky;로 모달 창이 헤더에 찰싹 달라 붙게하여 브라우저의 넓이를 조절하더라도 모달창이 헤더에 찰싹 달라붙은 채로 졸졸 따라오게 했다. 그리고 left값을 조절하여 모달 창이 헤더의 프로필 이미지 상단에 위치할 수 있도록 위치를 조정했다.