Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 514
Andy Giesler Avatar asked Jun 19 '15 18:06

Andy Giesler


People also ask

How to set position of a child element relative to parent?

Solution with the CSS position property ¶ It is possible to set absolute positioning of a child element relative to the parent container. For that, you must specify the position property with its “relative” value on the parent element.

What does offset and position relative mean in HTML?

It moves the tag based on where it currently is, relative to its usual place and relative to its surrounding tags without affecting their layout. Using these offsets and position:relative, you can also change the order in which elements appear on the page.

How to position a Div relative to the page in CSS?

For that, you must specify the position property with its “relative” value on the parent element. If we don’t specify the position of the parent element, the child <div> will be positioned relative to the page. Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

How do I change the position of an element in CSS?

On a Window's machine, right click on the element you want to select. A menu will then appear and from there select Inspect. The Chrome Developer Tools will open. Select the Computed tab and from there either scroll down to the position element or in the filter search box, type in position. What is the default position of HTML elements in CSS?


1 Answers

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>
like image 189
Stickers Avatar answered Oct 21 '22 07:10

Stickers