CODEWITHSUNDEEP
csscss-position
Andy Giesler
Andy Giesler

Reputation: 361

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

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?

Upvotes: 7

Views: 4476

Answers (3)

Stickers
Stickers

Reputation: 78686

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>

Upvotes: 3

Brandon Pereira
Brandon Pereira

Reputation: 1

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.

Upvotes: 0

Amot
Amot

Reputation: 323

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.

Upvotes: 0

Related Questions