div가 맨 위에 있는지 확인하는 방법.

div가 맨 위에 있는지 아니면 다른 html element에 가려져 있는지 알고 싶을 때 다음과 같이 하면 됩니다.

 

1. getBoundingClientRect로 위치를 구한다.

2. 확인하고 싶은 좌표를 선택한다.

3. 좌표에 있는 최상위 element를 찾는다.

4. 내 element와 최상위 element가 같은지 확인한다.

 

위와 같은 단계를 거치면 됩니다.

id가 container이 div의 우측 하단 코너가 현재 화면에 보여지는지 확인하는 예를 들어보겠습니다.

 

const _id = "container";
const _container = document.getElementId("container");
const _rect = _container.getBoundingClientRect();
const _x = _rect.right;
const _y = _rect.bottom;

const _topElement = document.elementFromPoint(_x, _y);

if(_container.isSameNode(_topElement)) {
    console.log("container가 제일 위에 있습니다.");
} else {
    console.log("container가 제일 위에 있지 않습니다.");
}

 

팝업 메뉴가 스크린 표시 범위를 벗어나는지 확인하는 용도로 사용해봤습니다.

_x, _y 위치는 확인하고 싶은 좌표로 변경하면 됩니다.