[CSS] map API사용시 map위에 버튼을 올려놓고 싶다?

mong_head 3월 08, 2020
웹을 제대로 배워보지 않은 상태에서 거의 맨땅에 헤딩하는 수준으로 API를 이용해서 서비스를 만들고 있는 중이다.

네이버 지도 API의 예제들이 있는 사이트를 보는데,

여기엔 script안의 요소들만 있고,
버튼에 관련한 코드는 없었다.

그래서 버튼을 내가 직접 추가해보았다.

index.html 일부

<body>
  <div class="map_wrap">
    <div id="map" style="width:100%;height:600px;">
      <button id="traffic" type="button" class="btn btn-info btn-sm">교통상황</button>
    </div>
  </div>

그런데, map이 그 위를 덮어버리면서 버튼이 보이지 않았다.




그래서 네이버 map 클라우드 페이지를 F12를 눌러 개발자모드를 들어가보았다.



저 [교통상황]의 코드를 보니, body쪽은 나와 비슷했다.
하지만 css가 달랐다.

바로, z-index부분을 추가하면 버튼이 위로 올라오게 된다.

z-index:1로 하든, z-index:1000으로 하든 현재상황에서는 생각할 필요가 없는 것 같다.

style.css의 일부

#traffic {
  position:absolute;
  top:0;
  left:0;
  padding:5px;
  z-index:10;
}

결과




mong_head

작성자: mong_head

mong_head{ think(); simplify(); }

댓글 쓰기

0 댓글

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)