Окно запуска игры содержит кнопку START. Когда окно в body кнопка работает, а когда я окно помещаю в контейнер - кнопка становится некликабельной.
<div class="container">
<div class="canvas">
<canvas width="800" height="600" id="screen"></canvas>
<div class="startWindow">
<form>
<button class="start">Start</button>
</form>
</div>
</div>
<div class="highscores"></div>
</div>
body{
background-image: url(img/body.jpg);
z-index: -5;
}
.container{
height: 600px;
width: 1150px;
background-color: cyan;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: -1;
}
canvas{
border:1px solid silver;
background-color:black ;
position: relative;
display: none;
z-index: 1;
float: left;
}
.highscores{
width: 300px;
height: 600px;
margin-left: 30px;
float: right;
background-color: red;
border:1px solid silver;
}
.startWindow{
border: 5px solid green;
background-image: url(img/startWindow.jpg);
width: 626px;
height: 491px;
z-index: 3;
position: absolute;
margin: auto auto;
box-shadow: 0 0 20px green;
display: none;
}
.start{
width: 200px;
height: 40px;
position: absolute;
right: 0;
left: 0;
margin: auto;
bottom: 28px;
background-color: #32CD32;
border-color: green;
z-index: 5;
font-size: 30px;
box-shadow: 0 0 10px green;
}
.start:hover{
box-shadow: 0 0 30px green;
cursor: pointer;
}