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

Question

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

还有其他想法吗？

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>会出现 <img />之前你给内部<div>一个比图像更高的z指数，它将完全重叠图像。

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

Answer 2

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

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

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