Невозможно получить DIV наложить еще один DIV, содержащий холст

Question

Html выглядит следующим образом:

<div id="content"> 
    <div id="menu"> 
     <img src="GFX/logo.png" class="centeredImage" /> 
     <div class="menuItem"><a href="#" onclick="WebGL.Program.StartGame()">Play</a></div> 
    </div> 
    <div id="gameOver"> 
     <div class="menuItem" id="finalScore"></div> 
    </div> 
    <div id="game"> 
     <div style="float:left; width:600px"> 
      <canvas id="canvas" width="600" height="900" style=""> 
       Your browser doesn't appear to support the HTML5 &lt;canvas&gt; element. 
      </canvas> 
     </div> 

     <div id="info"> 
      <img src="GFX/logo.png" id="logo" /> 
      <div class="desciptor">Multiplier:</div> 
      <div id="multi" class="info"> 12</div> 
      <div class="desciptor">Score:</div> 
      <div id="score" class="info">452343</div> 
      <div class="desciptor">Level:</div> 
      <div id="level" class="info">466</div> 
     </div> 
    </div> 
</div> 

И это CSS:

body 
{ 

    background-color: black; 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
    font-size: 24px; 
} 
#content 
{ 
    width:900px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 
#info 
{ 
    float:right; 
    width:260px; 
    height:860px; 
    background-color:#0f0f0f; 
    color:white; 
    padding:20px; 
    text-align:center; 
} 
#menu 
{ 
    display:block; 
} 
#game 
{ 
    display:block; 
    position:relative; 
} 
#logo 
{ 
    margin: -20px; 
} 
.centeredImage 
{ 
    display:block; 
    margin:auto; 
} 
.menuItem 
{ 
    padding-top:30px; 
    font-size:6em; 
    text-align:center; 

} 
a:link {text-decoration: none; color: white;} 
a:visited {text-decoration: none; color: white;} 
a:active {text-decoration: none; color: white;} 
a:hover {text-decoration: none; color: white;} 
.desciptor 
{ 
    padding-top:30px; 
    font-size:0.7em; 
    text-align:left; 
    width:inherit; 
} 
.info 
{ 
    width:inherit; 
} 
#multi { 
    font-size: 4em; 

} 
#score 
{ 
    font-size:2em; 
} 
#level 
{ 
    font-size:1.5em; 
} 
#gameOver 
{ 
    color: white; 
    position: absolute; 
    display:block; 
    padding-top:30px; 
    font-size:6em; 
    text-align:center; 
    height: 870px; 
    margin-top: -900px; 
    z-index: 999; 
} 

То, что я пытаюсь добиться, чтобы иметь gameOver div накладывает игровой div и его содержимое. К сожалению, это не работает, как я это делаю. Есть идеи ?

Я не слишком уверен в атрибутах отображения и позиции и о том, как они влияют на наложение div.

Answer 1

Похоже, вы пытаетесь использовать два разных метода одновременно.

1. Использования position:absolute атрибут уже вызывает ваш #gameOver DIV, чтобы установить положение независимо от других блоков для воспитания детей, за исключением. http://www.w3schools.com/cssref/pr_class_position.asp
2. Вы пытаетесь сделать один блок перекрываться другой с отрицательным margin (но заходящей отрицательной рентабельностью к неправильному элементу)

Это приводит к вашим #gameOver DIV отдохнуть на верхней часть страницы (при условии, что есть некоторое содержание в #finalScore блоке)

Чтобы решить проблему, выполните одно из следующих действий:

• Удалить margin-top свойство от #gameOver

 

    #gameOver { 
     color: white; 
     display: block; 
     font-size: 6em; 
     height: 870px; 
     margin-top: -900px; 
     padding-top: 30px; 
     position: absolute; 
     text-align: center; 
     z-index: 999; 
    } 

• Удалить position: absolute; и margin-top: -900px; свойства из #gameOver элемента и добавить к вашим margin-top: -900px;#game дел. Таким образом, ваш CSS будет выглядеть следующим образом:

 

    #gameOver { 
     color: white; 
     display: block; 
     font-size: 6em; 
     height: 870px; 
     padding-top: 30px; 
     text-align: center; 
     z-index: 999; 
    } 
    #game { 
     display: block; 
     margin-top: -900px; 
     position: relative; 
     z-index: -1; 
    }