여러 HTML 태그를 겹쳐서(overlay) 사용하고 싶을 때

여러 HTML 태그를 겹치게 (overlay) 하고 싶을 땐 CSS의 position 속성의 aboslute, relative 사용을 고려해보자

 

회사에서 vue3용 open-layers 라이브러리를 사용하여 지도를 표출하고

그 위에 버튼을 구현해야 하는 작업이 있었다.

 

<map></map>
<button>버튼이당</button>

 

 

그냥 태그 두 개를 나열하면 화면이 겹치지 않고 map이 표출된 영역 아래에 button이 표출된다.

 

display: flex; 를 이용하는 방법이 있지 않을까 해서 검색해보았지만 찾지 못했다.

아마 flex는 레이아웃을 컨트롤하는 게 목적이어서 그러지 않을까 싶었다.

 

결국 찾은 방법은 <button> 태그의 position속성을 absolute로 지정하면 된다.

<map></map>
<button class="my-btn">버튼이당</button>

<style>
.my-btn {
	position: absolute; /* 요렇게 */
	top: 2%;
	left: 2%;
	width: 100%;
}
</style>

 

이렇게 하면 지도에 겹쳐져서 버튼이 표시된다.

 

 

그런데 또 하나의 난관에 부딪혔다...

 

만일 지도 위에 또 다른 태그가 있어서 지도의 위치가 바뀌어버리면 어떻게 될까?

<p>새로 추가된 빌런이당</p>
<map></map>
<button class="my-btn">버튼이당</button>

 

이 경우에는 p의 height만큼 지도의 위치가 아래로 밀린다.

반면 버튼은 position: absolute; 이기 때문에 위치가 고정되어 있다.

 

결론적으로 원래 생각했던 지도 위의 이상적인 위치에 버튼이 위치하는 것이 아니라

버튼이 지도의 위쪽으로 배치된다.

 

이런 문제는 계속 나올 것이기 때문에 우리는 새로운 빌런이 얼마나 추가되든

버튼이 지도 위의 원하는 위치에 머무르게 할 필요가 있었다.

 

그리고 이 시점에서 알게된 position 속성의 중요한 특징은

position의 absolute 속성은 자신의 부모들 중 position이 relative 속성인 부모를 찾아서 기준점으로 삼는다는 것이다.

즉, 부모 중 하나가 position: relative; 라면 버튼은 전체 화면(window) 대신 이 부모를 기준점으로 삼는다는 것이다.

(참고 > https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent)

 

그렇다..

 

버튼이 항상 지도 위 특정 위치에 고정되게 하고 싶다면

지도와 버튼의 공통 부모를 하나 만들어서 postion: relative; 속성을 부여하면 되는 것이었다.

<p>새로 추가된 빌런이당</p>
<div class="my-parent">
	<map></map>
	<button class="my-btn">버튼이당</button>
</div>

<style>
.my-parent {
	position: relative; /* postion이 relative인 부모를 만들어주자 !! */
	width: 100%;
}

.my-btn {
	position: absolute;
	top: 2%;
	left: 2%;
	width: 100%;
}
</style>