在 jQuery 中轻松地将一个元素定位在另一个元素上？

Question

我需要使用 jQuery 将 div 放置在图像上。我可以使用 position:fixed 创建它，并使用顶部和左侧使用元素偏移来定位它，但它很糟糕，因为如果用户滚动，该元素将不会位于该元素的顶部。

还有其他想法吗？

Answer 1

如果您在多个位置执行此操作，则可以执行以下操作：

<div style="position: relative;">
  <div style="position:absolute; width: 276px; height: 110px; z-index: 2;">
    Content here will be on top the image
  </div>
  <img style="width: 276px; height: 110px;" src='http://www.google.com/intl/en_ALL/images/logo.gif' alt="Test Img" />
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

如果您匹配内部/外部 div 上的 height/width 样式属性，则内部 < ;div> 位于 之前，并且您为内部

提供了更高的 z-索引比图像高，它将与图像完美重叠。

您可以在此处查看实际操作的示例：http://jsfiddle.net/ZcBus/

Answer 2

创建一个带有position:relative的容器div。然后将图像放置在 div 内，并将原始 div 放置为位置：绝对，但坐标相对于容器 div。例如，

<div style='position:relative'>
  <img src='' alt=''/>
  <div id='original' style='position:absolute; top:10px; left:50px'/>
</div>

您可以使用 jQuery 注入部分或全部标记，或者更改样式，但根本不必使用脚本。