Buộc “vị trí: tuyệt đối” phải liên quan đến tài liệu chứ không phải vùng chứa mẹ

Tôi đang cố gắng chèn một div vào bất kỳ phần nào của phần nội dung và làm cho nó position: absoluteliên quan đến toàn bộ tài liệu chứ không phải phần tử mẹ có a position: relative.

Bạn sẽ phải đặt divbên ngoài của position:relativephần tử và vào trong body.

Bạn đang tìm kiếm position: fixed.

Từ MDN :

Định vị cố định tương tự như định vị tuyệt đối, ngoại trừ khối chứa phần tử là khung nhìn. Điều này thường được sử dụng để tạo một phần tử nổi vẫn ở cùng một vị trí ngay cả sau khi cuộn trang.

Giải pháp của tôi là sử dụng jQuery để di chuyển div ra bên ngoài mẹ của nó:

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

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

Nếu bạn không muốn đính kèm phần tử vào body, giải pháp sau sẽ hoạt động.

Tôi đến với câu hỏi này để tìm kiếm một giải pháp có thể hoạt động mà không cần gắn div vào phần thân, bởi vì tôi có một tập lệnh di chuột mà tôi muốn chạy khi con chuột ở trên cả phần tử mới và phần tử tạo ra nó. Miễn là bạn sẵn sàng sử dụng jQuery và được truyền cảm hứng từ câu trả lời của @Liam William:

var leftOffset = <<VALUE>>;
var topOffset = <<VALUE>>;
$(element).css("left", leftOffset - element.offset().left);
$(element).css("top", topOffset - element.offset().top);

Giải pháp này hoạt động bằng cách trừ đi vị trí bên trái và trên cùng hiện tại của phần tử (so với phần thân) để di chuyển phần tử đến 0, 0. Việc đặt phần tử ở bất kỳ đâu bạn muốn so với phần thân sau đó đơn giản như thêm một khoảng lệch trái và trên cùng giá trị.

Điều này không thể thực hiện được với CSS và HTML.

Sử dụng Javascript / jQuery, bạn có thể đưa các phần tử jQuery.offset()vào DOM và so sánh với nó jQuery.position()để tính toán vị trí nó sẽ xuất hiện trên trang.