141

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.

4
  • If it's position is absolute relative to the document, then it belongs as a child of the <body> tag, no? Jul 29, 2011 at 0:17
  • Did you see my solution below?
    – tw16
    Jul 29, 2011 at 16:42
  • Yea. I am creating a template that is used in lots of pages and sometimes its inside a relativly positioned element (which i cannot control. I now see that it is impossible. Thanks for you help. +1 from me, and i will mark it as correct if you say that its impossible in your answer. Aug 1, 2011 at 1:41
  • BrainJar has a totally classic introduction to positioning in CSS that will clear up any lingering questions here.
    – Alan H.
    Aug 10, 2011 at 21:13

5 Answers 5

148

You're looking for position: fixed.

From MDN:

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, or filter property set to something other than none.

6
  • 57
    the problem with this answer is the user wanted to use absolute because fixed elements dont move on scroll and absolute elements do :)
    – A Friend
    Oct 18, 2017 at 15:44
  • 7
    You're an absolute legend. Jan 9, 2019 at 11:16
  • 22
    The 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
  • 2
    That fixes it to the viewport, not the document. He wants something that does scroll with the page. Aug 23, 2022 at 2:35
39

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>
1
  • 3
    This solved my problem because I couldn't place my element directly inside the body element because I was using master pages. Thanks!
    – Osprey
    Jun 9, 2013 at 13:50
38

You will have to place the div outside of the position:relative element and into body.

7
  • 1
    ^^ This. If it's absolutely positioned then there isn't really a reason to have it inside the relatively positioned element anyway.
    – DOOManiac
    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
  • 31
    There 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.
    – walv
    Jan 31, 2017 at 2:49
  • 9
    @walv: position:fixed and position: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 the position:relative element.
    – tw16
    Jan 31, 2017 at 14:57
12

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.

1
9

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.

1
  • 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!
    – BornToCode
    May 19, 2019 at 18:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.