將圖像定位在居中的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後

回答

相關問題