Есть окно старта игры, я хочу чтобы оно выравнивалось посередине относительно самого контейнера с игрой. Кнопка в окне работает, когда окно помещено в body, но когда оно помещено в .container - перестает работать.
body {
background-image: url(img/body.jpg);
}
.container {
width: 1200px;
height: 600px;
background-color: cyan;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: -2;
}
canvas {
border: 1px solid silver;
display: block;
background-color: black;
position: relative;
z-index: 1;
}
.canvas {
float: left;
z-index: -1;
position: relative;
}
.startWindow {
border: 5px solid green;
background-image: url(img/logo.png);
width: 480px;
height: 320px;
z-index: 3;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.start {
width: 200px;
height: 40px;
position: absolute;
right: 0;
left: 0;
bottom: 25px;
background-color: #32CD32;
border-color: green;
margin: auto;
font-size: 30px;
box-shadow: 0 0 10px green;
}
.start:hover {
box-shadow: 0 0 30px green;
cursor: pointer;
}
<div class="container">
<div class="startWindow">
<button class="start">Let's go!</button>
</div>
<div class="gameOverWindow">
<button class="start">Try again!</button>
</div>
<p class="score">Score:</p>
<div class="canvas">
<canvas width="800" height="600" id="screen"></canvas>
</div>
<div class="highscores"></div>
</div>