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


93

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.


Jeśli jego pozycja jest bezwzględna względem dokumentu, to należy do <body>tagu, prawda?
Jim Garrison,

Widziałeś moje rozwiązanie poniżej?
tw16,

Tak. Tworzę szablon, który jest używany na wielu stronach i czasami znajduje się wewnątrz względnie pozycjonowanego elementu (którego nie mogę kontrolować. Teraz widzę, że to niemożliwe. Dziękuję za pomoc. +1 ode mnie i oznaczę go jako poprawne, jeśli powiesz, że jest to niemożliwe w twojej odpowiedzi
Timothy Ruhle

BrainJar ma całkowicie klasyczne wprowadzenie do pozycjonowania w CSS , które wyjaśni wszelkie pojawiające się tutaj pytania.
Alan H.

Odpowiedzi:


36

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


1
^^ To. Jeśli jest ustawiony absolutnie, to i tak nie ma powodu, aby mieć go wewnątrz względnie ustawionego elementu.
DOOManiac

7
@DOOManiac - możesz chcieć, aby znajdował się wewnątrz względnie pozycjonowanego elementu, ponieważ chcesz, aby uruchamiał skrypt najechania kursorem myszy lub nie uruchamiał skryptu myszy uruchamianego przez rodzica. Moja odpowiedź pozwala na taką sytuację.
Michael.Lumley,

1
@DOOManiac powodem umieszczania elementu absolutnego w elemencie względnym jest umieszczenie absolutnego div względem elementu względnego. Jeśli chcesz ustawić względem ciała, domyślnie body jest względne, nawet jeśli nie jest ustawione w ten sposób.
Jason Foglia

19
Mogą istnieć setki powodów, dla których musisz mieć kontener, aby być elementem podrzędnym innego kontenera, ale pozycja powinna być bezwzględna w stosunku do dokumentu. Odpowiedź jak dołączenie go bezpośrednio do ciała jest błędna. Prawidłowa odpowiedź to pozycja: ustalona. Głosowano w dół.
walv

3
@walv: position:fixedi position:absolutenie zachowują się tak samo. Naprawiono odnosi się do widoku (nie dokumentu) i spowoduje, że element będzie zawsze widoczny nawet po przewinięciu, co może powodować nakładanie się itp. Rozumiem, że mogą istnieć ważne powody dla struktury HTML, ale ponieważ pytanie dotyczy konkretnie html i css, moja odpowiedź jest prawidłowa. Jedynym sposobem, aby JS był relatywny do dokumentu, jest usunięcie go z position:relativeelementu.
tw16

95

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.


28
problem z tą odpowiedzią polega na tym, że użytkownik chciał użyć wartości bezwzględnej, ponieważ elementy stałe nie poruszają się po przewijaniu, a elementy absolutne tak :)
A Friend

3
Jesteś absolutną legendą.
Benisburgers

6
Pytanie brzmiało, jak ustawić pozycję względem dokumentu, a nie widoku
Paul Humphreys,

Może to potencjalnie powodować problemy w ie11 z powodu błędu w kontekstach układania
James Westgate

32

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>

1
To rozwiązało mój problem, ponieważ nie mogłem umieścić mojego elementu bezpośrednio wewnątrz elementu body, ponieważ korzystałem ze stron wzorcowych. Dzięki!
Osprey

9

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ść.


2
Warto również wspomnieć o funkcji pozycji jQueryUI .
Michael.Lumley

8

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.


IMHO ta odpowiedź jest najbardziej pomocna - bez przesuwania elementu bezpośrednio pod ciało (co nie zawsze jest możliwe) i bez użycia ustalonej pozycji, która sprawi, że element zawsze będzie się pojawiał nawet podczas przewijania w dół możemy uciekać się tylko do JS. jQuery.offset({ left: 0 })dla zwycięstwa!
BornToCode
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.