Html 叠加div使按钮不可点击，尽管它位于顶部

我有一个按钮，它位于全屏视频和不透明覆盖层的顶部

<section id="contact" class="threemonth-section">
    <div class="container">
    <video id="video_background" preload="auto" autoplay="true" muted="true" loop="loop" volume="0" > 
    <source src="video2.webm" type="video/webm"> 
    <source src="video2.m4v" type="video/mp4"> Video not supported 
    </video>

    <div id="overlay2"></div>

    <div id="welcomingText">


                    <h2 class="welcoming">Welcome</h2>
                    <h3 class="to">to</h3>
                    <h1 class="mySite">my site</h1>


            </div>
           <button type="button" class="button"></button>  


 </div>




</section>

我不明白为什么我的按钮不可点击。我知道它没有动作，但它被一些东西覆盖了，但我不明白为什么。HTML和z索引中的定位都让我相信它应该在顶部

---

这可能很明显，但我已经盯着这个看了好几个小时了。有什么想法吗

在浏览器的开发者工具中使用“inspect element”来找出按钮上覆盖了什么（如果有的话）。在这里工作…：@sh-ado-w是的，我开始认为这与视频有关，或者我在某个地方干扰了引导。我是否值得将我的实际代码上传到我的服务器并发布到这里，以更好地显示问题，你认为呢？你可以尝试一下，但在新问题中做得更好，这样更多的人会注意到它：）

.threemonth-section {
height: 105%;
width: 100%;
position:relative;
display:table;
padding-top: 200px;
z-index:-5;
text-align: center;
background: url(../img/3monthNew.png) no-repeat center center scroll;

background-size:cover;
}

#video_background { position: absolute; z-index:-4; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; width: auto; height: 105%;  overflow: hidden; }

#overlay2{
background-color:#000;

height:100%;
width:100%;
opacity:0.5;

z-index:-2;
position: absolute;
bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto;  overflow: hidden; 

}

#welcomingText{

margin-top:50px;
height:100%;
width:100%;
z-index:200;
color:#fff;

padding-top:15%;
z-index:-1;
margin-bottom:auto;
position: absolute;
bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto;  overflow: hidden; 

}

.button{



background: transparent url('button.png') no-repeat top;   
height: 50px;
width:50px;
background-size:100%;
position:absolute;
z-index:2;

background-repeat:no-repeat;


margin-left: 267px;


}