如何更改絕對定位的CSS元素的偏移父項？

默認情況下，位置設置爲「絕對」的HTML元素將相對於瀏覽器的視口進行定位。如何更改絕對定位的CSS元素的偏移父項？

但是，如果其中一個元素的祖先被設置爲非靜態位置，則該元素將相對於該祖先進行定位。祖先是元素的「抵消父母」。

問題：我想絕對定位一個元素相對於視口，但不幸的是它的祖先之一相對定位，所以它已成爲它的抵消父母。由於我正在修改第三方主題，因此我無法移動元素或刪除其祖先的相對位置。

使用CSS或JavaScript，是否有可能實際上設置或重置元素的偏移父項？我明白，DOM屬性[元素] .offsetParent是隻讀的，但有什麼方法可以間接地設置它的效果？

來源

2015-06-19 Andy Giesler

你不能使用JavaScript元素在層次中移動？ – j08691

@ j08691聽起來很有希望+1。我通常明白你在說什麼，但是你能否在答案中提供更多的細節？ –

@ j08691看着這更多一點。你在說什麼像jQuery .detach（）然後.append（）？ –

您可以使用Javascript來移動元素。這裏是jQuery解決方案prependTo()函數，你也可以使用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>

來源

2015-06-19 20:24:58 Stickers

非常好。我認爲我們需要使用.detach（）將其從當前位置移除，但我現在在prependTo（）文檔中看到這是一個移動，而不是克隆。 –

CSS屬性position: fixed使用視口而不是祖先。然而，它在滾動時固定在屏幕上，所以這可能是一個問題。

來源

2015-06-19 19:03:07

您可以使用偏移父項的值來移動子項 - 只需根據父窗口相對於窗口的呈現座標計算子值。

來源

2015-06-19 19:05:20 Amot

如何更改絕對定位的CSS元素的偏移父項？

回答

相關問題