There is a game start window, I want it to be aligned in the middle relative to the container with the game. The button in the window works when the window is placed in the body, but when it is placed in the .container, it stops working.

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>

  • All because of the z-index is likely. Try z-index to do more than body - P. Ilyin

1 answer 1

Changed html and removed position: relative; from canvas position: relative; , now .startWindow , .gameOverWindow and .start will be positioned relative to .canvas .

 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; 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"> <p class="score">Score:</p> <div class="canvas"> <canvas width="800" height="600" id="screen"></canvas> <div class="startWindow"> <button class="start">Let's go!</button> </div> <div class="gameOverWindow"> <button class="start">Try again!</button> </div> </div> <div class="highscores"></div> </div>

  • The only problem is that the button is not clickable - user192664
  • In the example of the code, the button is also not clickable, I did not pay attention to this, because question about the other. - stackanon
  • The question was primarily due to the fact that the button ceases to be clickable - Naddyson