在绝对定位的图像下堆叠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。在图像底部调整大小后，导航栏自然会处于正确的位置。你可能想考虑改变你实现这个的方式。