在絕對定位的圖像下堆疊div，其尺寸會發生變化

Question

我在這個頁面上使用jquery圖像縮放插件來構建大圖：http://seans.ws/sandbox/test/thrive/

我試圖在圖像下方放置一個導航div，但我不能這樣做，因爲圖像是絕對定位的，圖像的比例發生變化，所以我不能只爲導航指定一個填充頂部值，以使其顯示在照片下方。

任何幫助將不勝感激。

Answer 1

我會把圖像和導航div放在一個容器中，並指定它的絕對位置（而不是圖像）。這似乎是最簡單和最直接的解決方案。

Answer 2

首先，它的圖像必須絕對定位？一般情況下，如果您希望圖片相對於頁面上的其他元素放置，或者您希望頁面上的其他元素相對於它們相對放置的圖片進行放置，有時在絕對位置<div>

如果您解釋爲什麼圖像必須完全定位，可能有更簡單的解決方案。

假設需要圖像的絕對定位，我可以想象的唯一可能是修改jQuery插件或在圖像大小調整時製作第二個javascript來編輯填充頂部。

如果您需要絕對定位在頁面上的圖像，但相對於所有其他元素相對定位，我建議將圖像和內容（您想要顯示在其下方）放在絕對定位的元素內，但讓他們各自相對定位。

Answer 3

你可以得到height值，然後計算出有多少你需要填充。

var myheight = $('.maxAtOrigImageSize').height(); 
$('.nav').css('paddingTop', myheight+'px'); 

但是，您將需要爲當窗口改變大小，因此，如果用戶調整窗口的大小，您可以更新資產淨值的填充添加事件。

我回答你的問題，但我覺得有一個清晰的解決方案。我將創建一個包含DIV的調整大小的圖像坐在，並跟隨與導航DIV。在圖像底部調整大小後，導航欄自然會處於正確的位置。你可能想考慮改變你實現這個的方式。