div與z-indices重疊

Question

我在這一刻陷入了一絲r stuck。

如果你頭部到我的網站

...

http://dekkro.no-ip.org/

您將看到一個圖像，它的下面一個div。我花了幾個小時試圖將這兩者都放在頁面的中間，底部的div覆蓋圖像。

我失敗了，失敗了，我在這裏做錯了什麼？我已經使用z-index，並且定位，但是它從不居中。

謝謝！

Answer 1

所有你需要的是這樣的：

CSS：

#my_img { 
    margin:auto; 
    display:block; 
} 

#my_div { 
    margin:auto; 
    position:relative; 
    top:-100px; 
    z-index:2; 
} 

HTML：

<img id="my_img" src="http://dekkro.no-ip.org/images/testimage.png" /> 
<div id="my_div">whatever</div> 

這裏有一個演示：http://jsfiddle.net/tX2JY/embedded/result/

Answer 2

哇，那是很多代碼進入該頁面。

沒有審查所有東西（將在一點） - 你有沒有嘗試設置主圖像是一個div的背景圖像，然後簡單地把日誌形式放在裏面？

CSS

#image-div { background-image:url('yourimage.jpg'); } 

HTML：

<div id="image-div"> 
    <div id="form-div"> 
    form... 
    </div> 
</div> 

Answer 3

比方說，一個div有寬度w1和高度h1;其他w2，h2

#div1 { 
    position:absolute; top:50%; left:50%; margin-left: - w1/2px; margin-top:-h1/2px; 
} 

#div2 { 
    position:absolute; top:50%; left:50%; margin-left: - w2/2px; 
    margin-top:-h2/2px; z-index:9999; 
}