Question

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

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

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

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

Answer 1

您可以使用Javascript移动元素。这是带有prependTo()函数的jQuery解决方案，您也可以使用appendTo()。

$(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

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

Answer 3

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

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

3 个答案: