Force "position: absolute" relative to a non-parent container document

Question

I am trying to insert a div into any part of the body and make it "position: absolute" relative to the entire document, and not the parent element that has "position: relative".

Answer 1

You will need to place the div outside the position:relative element and in the body .

Answer 2

My solution was to use jQuery to move the div outside its parent:

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

Answer 3

You are looking for position: fixed .

From MDN :

Fixed positioning is similar to absolute positioning, except that the element containing the block is a viewport. This is often used to create a floating element that remains in the same position even after scrolling the page.

Answer 4

This is not possible with CSS and HTML.

Using Javascript / jQuery, you can potentially get the jQuery.offset() elements in the DOM and compare its jQuery.position() to figure out where it should appear on the page.

Answer 5

If you do not want to attach the element to the body , the following solution will work.

I approached this question, looking for a solution that would work without binding the div to the body, because I had a mouseover script that I wanted to run when the mouse was over a new element and the element that spawned It. While you're ready to use jQuery and inspired by @Liam William, answer:

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

This solution works by subtracting the current left and top position of the element (relative to the body) to move the element to 0, 0. Placing the element wherever you want relative to the body is as easy as adding the left and top offset value.