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

93

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

html css css-position Тимоти Рул
источник
Если его позиция абсолютна относительно документа, тогда он принадлежит как дочерний элемент <body>тега, нет?
Джим Гаррисон
Вы видели мое решение ниже?
tw16
Да. Я создаю шаблон, который используется на многих страницах, а иногда и внутри относительно позиционированного элемента (который я не могу контролировать. Теперь я вижу, что это невозможно. Спасибо за вашу помощь. +1 от меня, и я отмечу его как правильно, если вы говорите, что это невозможно в своем ответе.
Тимоти Рул
В BrainJar есть классическое введение в позиционирование в CSS, которое поможет прояснить все оставшиеся вопросы.
Алан Х.

Ответы:

36

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

tw16
источник
1
^^ Это. Если он абсолютно позиционирован, то в любом случае нет причин помещать его внутри относительно позиционированного элемента.
DOOManiac
7
@DOOManiac - вы можете захотеть, чтобы он находился внутри относительно позиционированного элемента, потому что вы хотите, чтобы он запускал скрипт наведения курсора мыши или не запускал скрипт мыши, запускаемый родителем. Мой ответ допускает такую ​​ситуацию.
Michael.Lumley
1
@DOOManiac причина помещения абсолютного элемента в относительный элемент состоит в том, чтобы расположить абсолютный элемент div относительно относительного элемента. Если вы хотите расположить относительно тела, тело по умолчанию является относительным, даже если оно не установлено таким образом.
Джейсон Фолья,
19
Могут быть сотни причин, по которым контейнер должен быть дочерним по отношению к другому контейнеру, но позиция должна быть абсолютной по отношению к документу. Ответ вроде включать его прямо в тело неправильно. Правильный ответ - позиция: фиксированная. Проголосовали против.
walv
3
@walv: position:fixedи position:absoluteне имеют такого же поведения. Фиксированный относится к области просмотра (а не к документу) и приведет к тому, что элемент всегда будет виден даже после прокрутки, потенциально вызывающей перекрытия и т. Д. Я понимаю, что могут быть веские причины для структуры html, но поскольку вопрос конкретно касается html и css, мой ответ правильный. Единственный способ без JS сделать его относительным к документу - это переместить его из position:relativeэлемента.
tw16
95

Вы ищите position: fixed.

Из MDN :

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

Адриан Головатый
источник
28
проблема с этим ответом заключается в том, что пользователь хотел использовать абсолютный, потому что фиксированные элементы не перемещаются при прокрутке, а абсолютные элементы перемещаются :)
Друг
3
Вы абсолютная легенда.
Benisburgers
6
Вопрос заключался в том, как позиционировать себя относительно документа, а не области просмотра
Пол Хамфрис
Это потенциально могло вызвать проблемы в ie11 из-за ошибки с контекстами наложения
Джеймс Вестгейт
32

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

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

<div id="loadingouter"></div>
Лиорк
источник
1
Это решило мою проблему, потому что я не мог разместить свой элемент непосредственно внутри основного элемента, потому что использовал главные страницы. Благодарность!
Osprey
9

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

Майкл Ламли
источник
2
Также стоит упомянуть функцию положения jQueryUI .
Майкл Ламли
8

Это невозможно с простыми CSS и HTML.

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

Лайм
источник
ИМХО, этот ответ является наиболее полезным - без перемещения элемента непосредственно под телом (что не всегда возможно) и без использования фиксированной позиции, которая заставит элемент всегда отображаться, даже при прокрутке вниз, мы можем прибегнуть только к JS. jQuery.offset({ left: 0 })для победы!
BornToCode