如何更改绝对定位的CSS元素的偏移父元素？

Question

默认情况下,位置设置为"绝对"的HTML元素将相对于浏览器的视口定位.

但是,如果元素的一个祖先设置为非静态位置,则该元素将相对于该祖先定位.祖先是元素的"偏移父母".

问题:我想绝对地定位一个相对于视口的元素,但遗憾的是它的一个祖先是相对定位的,所以它已成为它的偏移父元素.由于我正在修改第三方主题,因此无法移动元素或移除其祖先的相对位置.

使用CSS或JavaScript,我是否可以实际设置或重置元素的偏移父级？我知道DOM属性[element] .offsetParent是只读的,但有没有办法间接产生设置效果？

Answer 1

您可以使用 Javascript 来移动元素。这是带有函数的 jQuery 解决方案prependTo()，您也可以使用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>