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

Question

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

但是，如果元素的祖先之一设置为非静态位置，则该元素将相对于该祖先进行定位。该祖先是元素的"偏移父项"。

问题：我想相对于视口绝对定位一个元素，但不幸的是，它的祖先之一相对定位，因此它已成为其偏移父级。由于我正在修改第 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>

Answer 2

您可以使用偏移父项的值来移动子项 - 只需根据父项相对于窗口的呈现坐标计算子项的值。

Answer 3

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