輕鬆地將元素放置在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>來的<img />前並且你給內部<div>比圖像更高的z-index，它將完美地重疊圖像。

你可以在這裏看到一個例子：http://jsfiddle.net/ZcBus/

Answer 2

創建一個位置相對的容器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注入部分或全部標記，或更改樣式，但是您根本不必使用腳本。