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

将图像放在div后面

2 个答案: