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

Question

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

但是如果元素的祖先之一设置为非静态位置，则元素将相对于该祖先定位。该祖先是元素的 "offset parent"。

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

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

Answer 1

CSS 属性 position: fixed 使用视口而不是祖先。但是它在滚动时固定在屏幕上，所以这可能是个问题。

Answer 2

您可以使用偏移父项的值来移动子项 - 只需根据父项相对于 window 的渲染坐标计算子项的值。

Answer 3

您可以使用 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>

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

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

css

css-position