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

Question

默认情况下，位置设置为“绝对”的 HTML 元素将相对于浏览器的视口(viewport)定位。

但是如果元素的祖先之一被设置为非静态位置，则元素将相对于该祖先定位。该祖先是元素的“偏移父级”。

问题:我想相对于视口(viewport)绝对定位一个元素，但不幸的是它的一个祖先是相对定位的，所以它已经成为它的偏移父元素。由于我正在修改第 3 方主题，我无法移动元素或删除其祖先的相对定位。

使用 CSS 或 JavaScript，我是否可以有效地设置或重置元素的偏移父元素？我知道 DOM 属性 [element].offsetParent 是只读的，但是有什么方法可以间接地起到设置它的作用吗？

Answer 1

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