How can I change the offset parent of an absolutely positioned CSS element?

Question

By default, an HTML element whose position is set to "absolute" will be positioned relative to the browser's viewport.

But if one of the element's ancestors is set to a non-static position, the element will be positioned relative to that ancestor. That ancestor is the element's "offset parent".

The problem: I want to absolute-position an element relative to the viewport, but unfortunately one of its ancestors is relatively positioned, so that has become its offset parent. Since I'm modifying a 3rd-party theme, I can't move the element or remove its ancestor's relative positioning.

Using CSS or JavaScript, is it possible for me to, in effect, set or reset an element's offset parent? I understand that the DOM property [element].offsetParent is read-only, but is there some way to indirectly have the effect of setting it?

Answer 1

You could use Javascript to move the element. Here is the jQuery solution with prependTo() function, you could also use appendTo().

http://jsfiddle.net/6557cnew/

$(function() {
    $('.absolute').prependTo('body');
});

.relative {
    position: relative;
    left: 50px;
    top: 50px;
    border: 1px solid blue;
    width: 100px;
    height: 100px;
}
.absolute {
    position: absolute;
    border: 1px solid red;
    left: 0;
    top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="relative">
    relative
    <div class="absolute">
        absolute
    </div>
</div>

Answer 2

CSS property position: fixed uses the viewport instead of the ancestor. However it's fixed on the screen when scrolling, so this may be an issue.

Answer 3

You can use the value of the offset parent to move the child - just calculate the value of the child based on the rendered coordinates of the parent relative to the window.