html - 将图像定位在居中的 div 后面

Question

我的网站有一个 900 像素的 div #content，它以 margin-left: auto 和 margin-right: auto 为中心。我有一张图片需要显示在 div 后面，它会部分重叠 #content。

图像目前设置为显示为 block ，我可以将它放到需要的位置，但它不允许 #content 在图像上绘制。我可以使用 position: absolute 让 #content 显示在图像上，但是这会阻止使用 margin-left/margin-right 自动居中。

我目前的定位是:

img#watermark  
{
    margin-left: auto;  
    margin-right: auto;
    display: block;
    padding-left: 900px;
}

#content 只需要出现在水印上即可。

非常感谢帮助。

Answer 1

html:

<img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>

CSS:

div {
    margin:auto;
    width: 512px;
    height: 512px;
    background: rgba(0,0,0,.4);
    position: relative;
}
img {
    position: absolute;
    left: 50%;
    margin-left:-256px;
}

http://jsfiddle.net/Db2cw/