Force "position: absolute" относительно документа не родительского контейнера

Я пытаюсь вставить div в любую часть тела и сделать его "position: absolute" относительно всего документа, а не родительским элементом, который имеет "позицию: относительный".

Ответ 1

Вам нужно будет поместить div вне элемента position:relative и в body.

Ответ 2

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

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

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

Ответ 3

Вы ищете position: fixed.

Из MDN:

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

Ответ 4

Это невозможно с помощью CSS и HTML.

Используя Javascript/jQuery, вы потенциально можете получить элементы jQuery.offset() в DOM и сравнить его jQuery.position(), чтобы вычислить, где он должен появиться на странице.

Ответ 5

Если вы не хотите прикреплять элемент к body, будет работать следующее решение.

Я подошел к этому вопросу, ища решение, которое будет работать без привязки div к телу, потому что у меня был mouseover script, который я хотел запустить, когда мышь была над новым элементом и элементом, который породил Это. Пока вы готовы использовать 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. Размещение элемента везде, где вы хотите относительно тела, так же просто, как добавить левый и верхнее значение смещения.