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

by default, html element position set "absolute" positioned relative browser's viewport.

but if 1 of element's ancestors set non-static position, element positioned relative ancestor. ancestor element's "offset parent".

the problem: want absolute-position element relative viewport, unfortunately 1 of ancestors relatively positioned, has become offset parent. since i'm modifying 3rd-party theme, can't move element or remove ancestor's relative positioning.

using css or javascript, possible me to, in effect, set or reset element's offset parent? understand dom property [element].offsetparent read-only, there way indirectly have effect of setting it?

you use javascript move element. here jquery solution prependto() function, 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>