Html 将图像定位在居中的 div 后面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5926626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Positioning an image behind a centered div
提问by Sam
My site has a 900px div #contentthat is centered with margin-left: autoand margin-right: auto. I have an image that I need to display behind the div which will partially overlap #content.
我的网站有一个#content以margin-left: auto和为中心的 900px div margin-right: auto。我有一个图像需要在 div 后面显示，该图像将部分重叠#content。
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 #contentto draw over the image. I can get #contentto display over the image with position: absolutehowever this prevents the use of margin-left / margin-right auto to center.
该图像目前设置为显示为块，我可以将其放置到需要的位置，但不允许#content在图像上绘制。我可以#content在图像上显示，position: absolute但这会阻止使用 margin-left / margin-right 自动居中。
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;
}
#contentjust needs to appear over the watermark.
#content只需要出现在水印上。
Help greatly appreciated.
非常感谢帮助。
回答by seler
html:
html：
<img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>
css:
css：
div {
margin:auto;
width: 512px;
height: 512px;
background: rgba(0,0,0,.4);
position: relative;
}
img {
position: absolute;
left: 50%;
margin-left:-256px;
}
回答by HymanJoe
the solution is to have a surrounding div on the #content div, and that surroinding div positioned absolutely and with a defined width and height.
解决方案是在#content div 上有一个环绕的div，并且该环绕的div 绝对定位并具有定义的宽度和高度。
Ex:
前任：
html:
html：
<div id="outter">
<div id="image"><img src="something.jpg" /></div>
<div id="contentOutter">
<div id="content">the content here</div>
</div>
</div>
CSS:
CSS：
#outter {
width: 1000px;
height: 300px;
position: relative;
}
#image {
width: 1000px;
height: 300px;
position: absolute;
}
#contentOutter {
width: 1000px;
height: 300px;
position: absolute;
}
#content {
margin: 0 auto;
width: 900px;
}
Example here: http://jsfiddle.net/qwEhv/
这里的例子：http: //jsfiddle.net/qwEhv/
回答by boug
"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."
“我可以让 #content 显示在带有 position: absolute 的图像上，但这会阻止使用 margin-left / margin-right 自动居中。”
What you might need to do here is to have an additional div - call it #contentWrapper for example and center it using margin-left and right, set position to relative. Put div #content inside the wrapper div and position absolute. This should allow you to make #content look centered.
您可能需要在这里做一个额外的 div - 例如将其称为 #contentWrapper 并使用 margin-left 和 right 将其居中，将位置设置为相对。将 div #content 放在包装器 div 中并定位为绝对值。这应该允许您使 #content 看起来居中。
