如何覆蓋圖像的相對位置？

Question

我需要保持我的圖像相對，所以他們在正確的地方在div，但我不能得到Z指數工作！這是我的html代碼：

<img src="images/banners/banner1.jpg" class="banner" /><br /><br /> 
<div id="social_cont"> 
    <div id="social"> 
    Hello!! 
    </div> 
</div> 

，這是我的CSS：

.banner { 
    position: relative; 
    z-index: 0; 
} 

#social_cont { 
    text-align: center; 
    z-index: 10; 
} 
#social { 
    position: relative; 
    z-index: 10; 
} 

此刻我得到的是旗幟，然後集中在它下面的文字，這是爲什麼？

Answer 1

你對z-index做什麼感到困惑。首先，讓我告訴你一個非常古老但非常好的當前版本CSS reference，我從中學到了自己。

z-index所做的是決定哪個元素將位於「頂部」如果多個元素被強制佔用渲染中的相同空間。默認情況下（除非你使用CSS來改變某些元素的位置），這絕不會發生。

在你的問題中沒有足夠的信息給你一個很好的答案。如果您只想在標題上方標註div，爲什麼不簡單地將它們移動到HTML中以在橫幅之前出現？

更新：

因此，看來你想的旗幟作爲背景爲您的文本。這就是CSS background是：

<div id="social_cont" style="background: url(images/banners/banner1.jpg)"> 
    <div id="social">Hello!!</div> 
</div> 

您可以使用各種CSS background-related properties來調整你希望路線和如。

Answer 2

@Jon是正確的。我相信你想要這樣的東西。

http://jsfiddle.net/2EDnj/4/

Answer 3

與位置的元素：相對保持它的地位，也仍然會影響所有其他下列元素。這就是爲什麼你的div不會僅僅使用z-index重疊圖片的原因。您仍然需要定位div元素，例如：top:-100px其中金額將是圖片的高度。 最好的方法是使用Jons的答案。將圖像設置爲元素的背景圖像。