html - 将图像放在 div 后面

Question

我正在尝试使用“z-index”将图像（竹子）放在 div（联系表）后面。

但是，图像正在将 div 推开。

页面可以在这里看到：http ://www.abijahchristos.com/sample/springspa

JsFiddle在这里：http: //jsfiddle.net/Abijah/4n9LZ/

Answer 1

你可以使用背景属性来做到这一点。

试试这个你不需要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

在 CSS 中使用背景图像是有效的解决方案，但只是以防万一您不希望使用以下背景。

在绝对位置的情况下，您需要一个具有相对位置的容器，否则它将基于主体左上角定位。

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