Próbuję wstawić element div do dowolnej części ciała i ustawić go position: absolute
względem całego dokumentu, a nie elementu nadrzędnego, który ma rozszerzenie position: relative
.
Próbuję wstawić element div do dowolnej części ciała i ustawić go position: absolute
względem całego dokumentu, a nie elementu nadrzędnego, który ma rozszerzenie position: relative
.
Odpowiedzi:
Będziesz musiał umieścić div
zewnętrzną część position:relative
elementu i do body
.
position:fixed
i position:absolute
nie 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:relative
elementu.
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.
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>
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ść.
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.
jQuery.offset({ left: 0 })
dla zwycięstwa!
<body>
tagu, prawda?