Wymuś, aby „pozycja: bezwzględna” odnosiła się do dokumentu, a nie do kontenera nadrzędnego

Próbuję wstawić element div do dowolnej części ciała i ustawić go position: absolutewzględem całego dokumentu, a nie elementu nadrzędnego, który ma rozszerzenie position: relative.

Będziesz musiał umieścić divzewnętrzną część position:relativeelementu i do body.

Szukasz position: fixed.

Z MDN :

Ustalone pozycjonowanie jest podobne do pozycjonowania bezwzględnego, z tą różnicą, że blokiem zawierającym element jest rzutnia. Jest to często używane do tworzenia pływającego elementu, który pozostaje w tej samej pozycji nawet po przewinięciu strony.

Moim rozwiązaniem było użycie jQuery do przeniesienia div poza jego rodzica:

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

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

Jeśli nie chcesz dołączać elementu do body, zadziała poniższe rozwiązanie.

Doszedłem do tego pytania szukając rozwiązania, które działałoby bez dołączania elementu div do body, ponieważ miałem skrypt najechania myszką, który chciałem uruchomić, gdy kursor myszy znajdował się nad nowym elementem i elementem, który go zrodził. O ile chcesz używać jQuery i zainspirowany odpowiedzią @Liam William:

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

To rozwiązanie działa poprzez odjęcie bieżącej lewej i górnej pozycji elementu (względem ciała), tak aby przesunąć element do 0, 0. Umieszczenie elementu w dowolnym miejscu względem ciała jest wtedy tak proste, jak dodanie lewego i górnego odsunięcia wartość.

Nie jest to możliwe po prostu za pomocą CSS i HTML.

Używając Javascript / jQuery, możesz potencjalnie przenieść elementy jQuery.offset()do DOM i porównać je, jQuery.position()aby obliczyć, gdzie powinny się pojawić na stronie.