"위치 : 절대"를 상위 컨테이너가 아닌 문서에 상대적으로 강제 적용

본문의 어느 부분 에나 div를 삽입 position: absolute하고 position: relative. 가있는 부모 요소가 아닌 전체 문서에 상대적으로 만들려고 합니다 .

요소 의 div외부 를에 배치해야합니다 .position:relativebody

당신은를 찾고 있습니다 position: fixed.

MDN에서 :

고정 위치 지정은 요소의 포함 블록이 뷰포트라는 점을 제외하면 절대 위치 지정과 유사합니다. 페이지를 스크롤 한 후에도 동일한 위치에 유지되는 플로팅 요소를 만드는 데 자주 사용됩니다.

내 솔루션은 jQuery를 사용하여 div를 부모 외부로 이동하는 것입니다.

<script>
    jQuery(document).ready(function(){
        jQuery('#loadingouter').appendTo("body");
    });
</script>

<div id="loadingouter"></div>

요소를에 연결하지 않으려면 body다음 솔루션이 작동합니다.

나는 마우스가 새로운 요소와 그것을 생성 한 요소 모두 위에있을 때 실행하려는 mouseover 스크립트가 있었기 때문에 div를 본문에 연결하지 않고도 작동하는 솔루션을 찾기 위해이 질문에 왔습니다. jQuery를 기꺼이 사용하고 @Liam William의 답변에 영감을받은 경우 :

var leftOffset = <<VALUE>>;
var topOffset = <<VALUE>>;
$(element).css("left", leftOffset - element.offset().left);
$(element).css("top", topOffset - element.offset().top);

이 솔루션은 요소의 현재 왼쪽 및 상단 위치 (본문 기준)를 빼서 요소를 0, 0으로 이동합니다. 본문을 기준으로 원하는 위치에 요소를 배치하는 것은 왼쪽 및 상단 오프셋을 추가하는 것만 큼 간단합니다. 값.

단순히 CSS와 HTML로는 불가능합니다.

Javascript / jQuery를 사용하면 잠재적으로 jQuery.offset()DOM에 요소 를 가져 와서 비교 jQuery.position()하여 페이지에 표시되어야하는 위치를 계산할 수 있습니다.