Force "position: absolute" to be relative to the document and not the parent container

W

5

147

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.

Wad answered 29/7, 2011 at 0:7 Comment(4)

If it's position is absolute relative to the document, then it belongs as a child of the <body> tag, no? – Leitmotif 29/7, 2011 at 0:17

Did you see my solution below? – Squilgee 29/7, 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. – Wad 1/8, 2011 at 1:41

BrainJar has a totally classic introduction to positioning in CSS that will clear up any lingering questions here. – Fenestella 10/8, 2011 at 21:13

S

40

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

Squilgee answered 29/7, 2011 at 0:21 Comment(7)

^^ This. If it's absolutely positioned then there isn't really a reason to have it inside the relatively positioned element anyway. – Unintelligent 29/7, 2011 at 0:35

@Unintelligent - 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. – Bohlen 29/9, 2014 at 16:19

@Unintelligent 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. – Ingaingaberg 13/2, 2015 at 18:51

Unlikely scenario i accept. But if the obtained positions are relative to the document e.g. as returned by jQuery's offset() method and the body is absolutely positioned and thus has an offset from the document you will need to additionally know what this offset is. William's answer below seems to give a pointer how to do this – Morrissette 29/6, 2015 at 18:25

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. – Exudation 31/1, 2017 at 2:49

@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. – Squilgee 31/1, 2017 at 14:57

@Squilgee did I somewhere say that position: fixed and absolute have the same behaviour? Statement "The only way without JS to make it relative to the document is to move it out of the position:relative element" is wrong because it is not the only way but one of the ways. Another way is to set the target element with the position: fixed and you don't need JS here. Hope it clears my previous comment. That's why correct answer is given by Adrian Holovaty because with his solution it can be achieved what was asked in the Question. – Exudation 1/2, 2017 at 2:26

B

154

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.

Birck answered 9/6, 2016 at 18:29 Comment(6)

the problem with this answer is the user wanted to use absolute because fixed elements dont move on scroll and absolute elements do :) – Blown 18/10, 2017 at 15:44

You're an absolute legend. – Coaster 9/1, 2019 at 11:16

The question was how to position relative to the document and not the viewport – Slagle 18/2, 2019 at 17:8

This could potentially cause problems in ie11, because of a bug with stacking contexts – Scylla 2/5, 2019 at 10:29

That fixes it to the viewport, not the document. He wants something that does scroll with the page. – Stink 23/8, 2022 at 2:35

Is there any way to fix this if any ancestors have a transform, perspective, or filter? Please is anyone knows this I badly need a solution to this? – Deem 21/11, 2022 at 21:4

S

40

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

Squilgee answered 29/7, 2011 at 0:21 Comment(7)

^^ This. If it's absolutely positioned then there isn't really a reason to have it inside the relatively positioned element anyway. – Unintelligent 29/7, 2011 at 0:35

@Unintelligent - 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. – Bohlen 29/9, 2014 at 16:19

@Unintelligent 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. – Ingaingaberg 13/2, 2015 at 18:51

Unlikely scenario i accept. But if the obtained positions are relative to the document e.g. as returned by jQuery's offset() method and the body is absolutely positioned and thus has an offset from the document you will need to additionally know what this offset is. William's answer below seems to give a pointer how to do this – Morrissette 29/6, 2015 at 18:25

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. – Exudation 31/1, 2017 at 2:49

@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. – Squilgee 31/1, 2017 at 14:57

@Squilgee did I somewhere say that position: fixed and absolute have the same behaviour? Statement "The only way without JS to make it relative to the document is to move it out of the position:relative element" is wrong because it is not the only way but one of the ways. Another way is to set the target element with the position: fixed and you don't need JS here. Hope it clears my previous comment. That's why correct answer is given by Adrian Holovaty because with his solution it can be achieved what was asked in the Question. – Exudation 1/2, 2017 at 2:26

B

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>

Bloomfield answered 10/10, 2011 at 10:31 Comment(1)

This solved my problem because I couldn't place my element directly inside the body element because I was using master pages. Thanks! – Larocca 9/6, 2013 at 13:50

B

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.

Bohlen answered 29/9, 2014 at 16:16 Comment(1)

Also worth mentioning is the jQueryUI position function. – Bohlen 8/10, 2014 at 11:4

S

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.

Sibelle answered 29/7, 2011 at 0:31 Comment(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! – Ramtil 19/5, 2019 at 18:34

Recommended topics

Hot tags