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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:29:27  来源:igfitidea点击:

Positioning an image behind a centered div

htmlcss

提问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.

我的网站有一个#contentmargin-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;
}

http://jsfiddle.net/Db2cw/

http://jsfiddle.net/Db2cw/

回答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 看起来居中。