커스텀 오버레이 관련 질문입니다

가운데 큰 커스텀 오버레이가 줌과 포커스에 따라 위치가 바뀌거나 보이지 않습니다.

줌확대 정상
이게 정상 일때의 위치입니다.

줌확대 비정상
정상 상태에서 포커스를 조금만 벗어나면 커스텀 오버레이가 보이지 않습니다.

줌확대후 줌아웃
줌을 확대한 후 축소하면 오버레이 위치가 변경되어 있습니다.

줌확대후 줌아웃2
그 상태로 줌아웃을 하면 상당히 많이 틀어져있습니다.

.flex-parent {
        display: flex;
        justify-content: space-between;
    }

    .customlegoverlay {
        position:relative;
        bottom:85px;
        left:85px;
        float:left;
    }   

    .overlaybox {position:relative; background:#3a3e4a; padding:15px 10px; color:white; display: none;}
    .overlaybox ul {width:100%;}
    .overlaybox li {position:relative;margin-bottom:2px;background:#2b2d36;padding:10px 10px;color:#aaabaf;line-height: 1;}
    .overlaybox li span {display:inline-block;}
    .overlaybox li .title {font-size:13px;}
    .overlaybox li .state {font-size:14.5px;font-weight:bold;}
    .overlaybox li:hover {color:#fff;background:#d24545;}
    .overlaybox ul {overflow:hidden;margin:0;padding:0;}
    .overlaybox li {list-style: none;}
    .overlaybox .flex-p {display: flex; justify-content: space-between;}

위가 큰 커스텀 오버레이 css 입니다.

카카오맵에서 버스정류장을 클릭하면 나오는 커스텀 오버레이? 느낌이 나게 만드는 중인데 무엇이 문제일까요… 답변 부탁드립니다!

좌표의 위치에 생긴 커스텀 오버레이를 customlegoverlay 스타일에서
left, bottom 값으로 위치를 조절했기 때문에 생긴 문제입니다.
커스텀 오버레이 위치가 변경되지 않도록 스타일을 적용해주세요.

카카오 맵에 적용된 커스텀 오버레이 스타일을 확인하고 싶다면
개발자 도구를 열어 해당 Element를 선택해 스타일을 확인할 수 있습니다.

답변 감사합니다.

1개의 좋아요