Html 图像位于下方的分区超高悬停按钮上方

我遇到了这个问题。我有一张照片需要放在这个位置上。图像的叶子需要越过div，但是图像的宽度过大，会挡住其他东西。在我的例子中，它会阻止“联系我们”按钮悬停。如何在不将图像从此设置位置移动的情况下修复此问题。我试过z-index，但不起作用。我想让它保持原样，但要有悬停的能力。请帮忙。我将附上一张图片和一把小提琴：

HTML

我的同僚们都不愿意坐在那里，因为他们都是精英，都是临时的

我的同僚们都不愿意坐在那里，因为他们都是精英，都是临时的

我的同僚们都不愿意坐在那里，因为他们都是精英，都是临时的

联系我们

您的CSS有一个输入错误：

.btn-test {
    position:relative;
}

---

哦，你不需要在

上重新声明你的
显示：block
。btn测试：hover

，因为你已经在默认状态下执行了。

你在CSS的第14行有一个输入错误，更改

位置：relative至<代码>位置：相对将更正此问题

所以它最终会变成这样：


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

.btn-test {
    position:relative;
}

.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;
    position:relative;
}