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

Question

默认情况下，将HTML元素的位置设置为“absolute”会相对于浏览器窗口进行定位。但是，如果该元素的祖先元素之一设置为非静态位置，则该元素将相对于该祖先元素进行定位。该祖先元素是该元素的“offset parent”。问题在于：我想要绝对定位一个元素相对于视口，但不幸的是其中一个祖先元素被设为相对定位，因此它已经成为了其offset parent。由于我正在修改第三方主题，所以我不能移动该元素或删除其祖先元素的相对定位。使用CSS或JavaScript，我能否有效地设置或重置元素的offset parent？我知道DOM属性[element].offsetParent是只读的，但是否有间接地产生它的效果的某种方法？

- Andy Giesler

---

你不能使用JavaScript来移动层次结构中的元素吗？ - j08691

@j08691听起来很有前途+1。我大致理解你在说什么，但你能否在回答中再多提供一些细节呢？ - Andy Giesler

@j08691 我进一步研究了一下。你是在说类似于 jQuery 的 .detach() 然后 .append() 吗？ - Andy Giesler

你不能这样做，而且把查看HTML作为分层结构的代码也不太好。我知道你正在使用别人的模板，但我建议尝试将绝对元素提升到DOM树的更高层。 - Poodimizer

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>

- Stickers

---

非常好。我原以为我们需要使用.detach()将其从当前位置移除，但现在我在prependTo()文档中看到它是一个移动而不是克隆。 - Andy Giesler

Answer 2

CSS 属性 position: fixed 使用视口而不是祖先元素。但是当滚动时，它会固定在屏幕上，因此可能会出现问题。

- Brandon Pereira

Answer 3

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

- Amot