將圖像放在div後面

Question

我試圖用「z-index」將圖像（竹子）放在div（聯繫表單）後面。

但是，圖像推動了div的方式。

頁可以在這裏看到：http://www.abijahchristos.com/sample/springspa

的jsfiddle這裏：http://jsfiddle.net/Abijah/4n9LZ/

Answer 1

您可以使用背景屬性來做到這一點。

試試這個你不需要在CSS中有背景圖像的z-index

.copy_right { 
    background: url("../images/bamboo1.png") repeat scroll 0 0 transparent; 
    border: 2px solid #CCCCCC; 
    border-radius: 4px 4px 4px 4px; 
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); 
    float: left; 
    height: 310px; 
    margin: 0 25px 0 30px; 
    padding: 5px 0 0; 
    width: 310px; 
    z-index: 2; 
} 

Answer 2

是有效的解決辦法，但只是櫃面你不想使用背景follwoing。

在絕對位置的情況下，您需要有一個相對位置的容器，否則它將根據身體左上角進行定位。

.copy_right { 
position:absolute; 
top:0; 
width: 310px; 
height: 310px; 
border: 2px solid #CCC; 
margin: 0 25px 0 30px; 
padding: 5px 0 0 0; 
border-radius: 4px; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px; 
-moz-box-shadow: rgba(0,0,0,0.3) 0 3px 10px; 
box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px; 
z-index: 2; 
} 

#bamboo { 
position: absolute; 
z-index: 1; 
right: -17px; 
top: 0; 
}