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

Question

我的网站有一个900px div #content,以margin-left: auto和为中心margin-right: auto.我有一个图像,我需要在div后面显示,它将部分重叠#content.

图像设置为当前显示为块,我可以将其显示到需要的位置,但不允许#content在图像上绘制.我可以#content在图像上显示position: absolute但是这可以防止使用margin-left/margin-right auto到center.

我目前的定位,它需要的地方是:

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/