如何將絕對定位的元素直接放在內聯元素的位置上？

如果你想要背景，這是一個跟進問題How can I stop an IFrame reloading when I change it's position in the DOM?。如何將絕對定位的元素直接放在內聯元素的位置上？

我有一個內聯div <div id="leaderboard-slot"></div>（具有固定的寬度和高度）和另一個div（「leaderboard-loader」）在該頁面的下一個div的實際內容。

由於各種原因（請參閱上一個線程），我無法簡單地執行appendChild或類似操作。

相反，我希望定位排行榜裝載程序，使它佔據排行榜插槽「保留」的空間。我已經使用了一些jQuery方法來做到這一點：

var loader = $('leaderboard-loader'); 
var dest = $('leaderboard-slot'); 
var pos = dest.getPosition(); 
loader.setStyle('top', pos.y + 'px'); 
loader.setStyle('left', pos.x + 'px');

我在文檔加載和調整大小。但是，如果頁面內的其他元素導致迴流，則目標div將移動，但加載器不會。

是否有這樣做的安全方式 - 當我對頁面沒有其他任何知識時它需要工作（即，我不能僅僅對其他任何可能導致迴流的方法進行調用，因爲我沒有知道這些是什麼）。

任何幫助，將不勝感激 - 謝謝:)

來源

2010-02-09 James Crowley

我開始後悔my answer現在。希望你能找到比絕對定位解決方案更好的東西。但是，本着kludgey解決方案的精神，您可以在定時器上調用重定位腳本。感嘆。

來源

2010-02-10 00:41:47 Jacob

如果我正確理解你的問題，沒有必要爲Javascript。只需在leaderboard-slot標記前面放置leaderboard-loader，給它position: absolute並且寬度和高度相同。如果插槽是一個正常的元素，加載器將浮在它上面並完美地覆蓋它。

<div id="leaderboard-loader"></div><div id="leaderboard-slot"></div>

來源

2010-02-09 23:39:57

感謝佩卡。不幸的是，排行榜加載器必須出現在文檔的底部（它加載了一堆使用document.write的外部腳本） - 這個想法是在排行榜加載器之前允許整個頁面加載。 – 2010-02-09 23:51:00

啊，我明白了。我重讀了「進一步下一頁」。 – 2010-02-09 23:53:22

你可以把他們都在相同的相對定位，0邊距div，與臨時股利Z索引在慢加載器的頂部。

使它們都絕對定位在父窗口中，而不是窗口中，它們的大小是0：0。

您可以使用不透明和褪色一個作爲你消失的另一個出來，或者只是交換visibility：hidden的和這兩個元素可見，當你準備..

來源

2010-02-10 00:58:38 kennebec

看到我對Pekka的評論 - 不幸的是，它們不能在同一個div中 - 需要頁面才能夠在沒有「loader」div的情況下首先加載。還是）感謝你的建議：） – 2010-02-10 01:07:13

如何將絕對定位的元素直接放在內聯元素的位置上？

回答

相關問題