将图像放置在居中的div后面 [英] Positioning an image behind a centered div

问题描述

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

My site has a 900px div #content that is centered with margin-left: auto and margin-right: auto. I have an image that I need to display behind the div which will partially overlap #content.

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

The image is set to display as block at present and I can get it to where it needs to be, but it doesn't allow #content to draw over the image. I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center.

我当前的定位(需要定位的位置)是:

My current positioning, which gets it where it needs to be is:

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

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

#content just needs to appear over the watermark.

非常感谢您的帮助.

推荐答案

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/

这篇关于将图像放置在居中的div后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！