Примусити “position: absolute” бути відносно документа, а не батьківського контейнера

Я намагаюся вставити div у будь-яку частину тіла та зробити його position: absoluteвідносно всього документа, а не батьківського елемента, який має position: relative.

Вам доведеться розмістити divзовнішню частину position:relativeелемента та body.

Ви шукаєте position: fixed.

З MDN :

Фіксоване позиціонування схоже на абсолютне позиціонування, за винятком того, що блоком, що містить елемент, є область перегляду. Це часто використовується для створення плаваючого елемента, який залишається в однаковому положенні навіть після прокрутки сторінки.

Моє рішення було використовувати jQuery для переміщення div за межі батьківського рівня:

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

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

Якщо ви не хочете приєднувати елемент body, наступне рішення буде працювати.

Я прийшов до цього питання, шукаючи рішення, яке могло б працювати, не прикріплюючи 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()щоб розрахувати, де він повинен відображатися на сторінці.