Заставить "position: absolute" быть относительно документа, а не родительского контейнера

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

58
css css-position html

5 ответов

вам придется разместить div за пределами position:relative элемент и body.

27

вы ищете position: fixed.

из MDN:

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

47

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

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

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

Если вы не хотите, чтобы прикрепить элемент к 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. Размещение элемента там, где вы хотите относительно тела, так же просто, как добавление значения смещения влево и вверх.

7

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

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

4