将图像定位在居中的div后

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

将图像设置为当前显示的块，并且可以将其设置为需要的位置，但不允许#content绘制图像。我可以通过position: absolute获得#content以显示图像，但是这样可以防止使用左侧/右侧边距自动居中。

我现在的定位，它需要的地方是它得到它：

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

#content只需要出现在水印。

非常感谢。

来源

2011-05-08 Sam

你有没有试过玩Z指数？ – ArtoAle 2011-05-08 09:31:44

如果内容必须位于顶部，则无法将图像设置为css背景？ – Miquel 2011-05-08 09:33:54

Z-Index不幸运行，并且没有 - 页面上已经有一个背景。无论如何，欢呼声。 – Sam 2011-05-08 09:34:42

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/

来源

2011-05-08 09:39:52 seler

如果你有其他影响它的元素使用'z-index'（记住：它只适用于'position：relative或absolute'）。 – seler 2011-05-08 09:48:27

你提供的东西并不适合我，但剩下的50％是我需要的，以抵消它需要的偏移量。干杯。你不知道这已经到了多长时间了！ – Sam 2011-05-08 09:54:57

的解决方案是对＃内容的div周围的div，而且surroinding DIV定位的绝对和定义的宽度和高度。

例：

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：

#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; 
}

这里举例：http://jsfiddle.net/qwEhv/

来源

2011-05-08 09:40:32 jackJoe

感谢您的努力，但这不起作用。我用这个随机图片找到的图片比你的图片小 - http://jg.msdpt.k12.in.us/staff/Huckaby/splat.gif - 它没有出现在右边 - 它是左对齐的。 – Sam 2011-05-08 09:47:07

“我能得到＃内容显示在同位置上的图像：绝对的，但是这样可以防止使用margin-left/margin-right自动居中。 “

您可能需要做的是创建一个额外的div - 例如将其命名为#contentWrapper，并使用margin-left和right来居中它，将position设置为relative。将div＃内容放在包装div中并且绝对位置。这应该允许你使＃内容看起来居中。

来源

2011-05-08 09:48:05 boug

将图像定位在居中的div后

回答

相关问题