I am trying to insert a div into any part of the body and make its position: absolute
relative to the whole document and not a parent element which has a position: relative
.
5 Answers
You're looking for position: fixed
.
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This is often used to create a floating element that stays in the same position even after scrolling the page.
Notice it doesn't work when...
(...) one of its ancestors has a
transform
,perspective
, orfilter
property set to something other thannone
.
-
57the problem with this answer is the user wanted to use absolute because fixed elements dont move on scroll and absolute elements do :)– A FriendOct 18, 2017 at 15:44
-
7
-
22The question was how to position relative to the document and not the viewport Feb 18, 2019 at 17:08
-
This could potentially cause problems in ie11, because of a bug with stacking contexts May 2, 2019 at 10:29
-
2That fixes it to the viewport, not the document. He wants something that does scroll with the page. Aug 23, 2022 at 2:35
My solution was to use jQuery for moving the div outside its parent:
<script>
jQuery(document).ready(function(){
jQuery('#loadingouter').appendTo("body");
});
</script>
<div id="loadingouter"></div>
-
3This solved my problem because I couldn't place my element directly inside the body element because I was using master pages. Thanks!– OspreyJun 9, 2013 at 13:50
You will have to place the div
outside of the position:relative
element and into body
.
-
1^^ This. If it's absolutely positioned then there isn't really a reason to have it inside the relatively positioned element anyway. Jul 29, 2011 at 0:35
-
8@DOOManiac - you might want it inside the relatively positioned element because you want it to run a mouseover script, or not run a mouseout script triggered by the parent. My answer allows for such a situation. Sep 29, 2014 at 16:19
-
1@DOOManiac the reason for putting an absolute element into a relative element is to position the absolute div relative to the relative element. If you want to position relative to the body, body by default is relative, even if its not set that way. Feb 13, 2015 at 18:51
-
31There can be hundreds of reasons you need to have the container to be the child of another container but the position should be absolute to the document. Answer like include it directly to the body is wrong. Correct answer is position: fixed. Downvoted.– walvJan 31, 2017 at 2:49
-
9@walv:
position:fixed
andposition:absolute
do not have the same behaviour. Fixed is relative to the viewport (not the document) and will cause the item to always be visible even after scrolling potentially causing overlaps etc. I understand that there may be valid reasons for the html structure, but as the question is specifically about html and css, my answer is correct. The only way without JS to make it relative to the document is to move it out of theposition:relative
element.– tw16Jan 31, 2017 at 14:57
If you don't want to attach the element to body
, the following solution will work.
I came to this question looking for a solution that would work without attaching the div to the body, because I had a mouseover script that I wanted to run when the mouse was over both the new element and the element that spawned it. As long as you are willing to use jQuery, and inspired by @Liam William's 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 element's current left and top position (relative to the body) so as to move the element to 0, 0. Placing the element wherever you want relative to the body is then as simple as adding a left and top offset value.
-
2
This isn't possible with simply CSS and HTML.
Using Javascript/jQuery you could potentially get the elements jQuery.offset()
to the DOM and compare it the jQuery.position()
to calculate where it should appear on the page.
-
IMHO this answer is the most helpful - without moving the element directly under the body (which is not always possible) and without using position fixed which will make the element always appear even when scrolling down we can only resort to JS.
jQuery.offset({ left: 0 })
for the win! May 19, 2019 at 18:34
<body>
tag, no?