0

Есть окно старта игры, я хочу чтобы оно выравнивалось посередине относительно самого контейнера с игрой. Кнопка в окне работает, когда окно помещено в 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>

1
  • Все из-за z-index скорее всего. Попробуй z-index сделать больше чем у body
    – P. Ilyin
    17 авг 2016 в 2:20

1 ответ 1

1

Поменял html и у canvas удалил position: relative;, теперь .startWindow, .gameOverWindow и .start будут позиционироваться относительно .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>

3
  • Только проблема в том, что кнопка не кликабельна
    – user192664
    17 авг 2016 в 4:17
  • В примере кода кнопка тоже не кликабельна, я на это не стал обращаться внимания т.к. вопрос про другое.
    – stackanon
    17 авг 2016 в 4:19
  • вопрос был в первую очередь из-за того, что кнопка перестает быть кликабельной
    – Naddyson
    21 авг 2016 в 22:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.