我遇到了这个问题。我有一个图像需要在 div 上的这个位置。图像的叶子需要越过 div 但图像宽度过大并挡住了其他东西。就我而言，它阻止了悬停的“联系我们”按钮。如何在不从该设置位置移动图像的情况下解决此问题。我试过 z-index 但这不起作用。我想保持原样，但可以悬停。请帮忙。我会附上一张图片和一个 FIDDLE：http: //jsfiddle.net/4jtzU/
HTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut l
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut l
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut l
联系我们<div id="boxes">
<div class="box">
<div class="box-container">
<div class="box-img">
<img src="http://www.nevsites.com/dish1.png" />
</div>
</div>
</div>
</div>
CSS：
.btn_test{
border: none;
padding: 0;
background: none;
display:block;
background-color: #FF8000;
padding: 10px;
font-family: helevetica, Arial, sans-serif;
width: 70%;
margin:10px auto;
color:white;
font-weight: bold;
z-index:10;
postion:relative;
}
.btn_test:hover{
background-color: gray;
cursor: pointer;
display:block;
}
#mid-boxes-container{
background: red;
height:100px;
width:100%;
}
#mid-boxes{
width:80%;
height: 100%;
margin: 0 auto;
}
.mid-box{
padding: 10px;
text-align: center;
float:left;
width:28%;
height:150px;
margin:0 .5%;
color:white;
background: red;
}
#boxes{
margin:0 auto;
margin-top: 50px;
position: relative;
}
.box{
width:100%;
height: 600px;
text-align: center;
-webkit-animation: FadeIn 1s linear;
-webkit-animation-fill-mode:both;
position: relative;
}
.box-container{
margin: 10px;
height: 100% ;
position: relative;
}
.box-img{
width:60%;
position: relative;
float:left;
}
.box-img img{
width:1000px;
position: relative;
margin-top: -120px;
margin-left: -340px;
}