Question

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

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

这里是每个部分的CSS。

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


}

我无法弄清楚为什么我的按钮无法点击。我知道它没有任何动作，但它被某些东西覆盖，但我无法弄清楚为什么。在我的HTML和z-index中的定位都让我相信它应该在最顶层？

这可能很明显，但我已经盯着这几个小时了。有任何想法吗？

覆盖DIV使按钮无法点击，尽管在顶部

0 个答案: