холст внутри DIV блокирующие высшего ZIndex DIV

я не понимаю, почему ДИВ который ниже в ZIndex донжон блокирует DIV, которые имеют более высокую ZIndex: Это мой простой HTML:холст внутри DIV блокирующие высшего ZIndex DIV

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>game</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 
    <style> 
    body { 
     background-color: lightblue; 
    } 
     html, body, canvas { 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 

    div { 
     -webkit-user-select: none; /* webkit (safari, chrome) browsers */ 
     -moz-user-select: none; /* mozilla browsers */ 
     -khtml-user-select: none; /* webkit (konqueror) browsers */ 
     -ms-user-select: none; /* IE10+ */ 
    } 
    #startMenuWrapper { 
     -webkit-transition: max-height 1s; 
     -moz-transition: max-height 1s; 
     -ms-transition: max-height 1s; 
     -o-transition: max-height 1s; 
     transition: max-height 1s; 
     overflow: hidden; 
    } 
    #startMenuWrapper { 
     z-index: 2; 
    } 
    #gameAreaWrapper { 
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 

    } 
    #playerNameInput { 
     width: 200px; 
     text-align: center; 
     padding: 10px; 
     border: solid 1px #dcdcdc; 
     transition: box-shadow 0.3s, border 0.3s; 
     box-sizing: border-box; 
     border-radius: 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     margin-bottom: 10px; 
     outline: none; 
    } 
    #startButton, #spectateButton { 
     position: relative; 
     margin: auto; 
     margin-top: 10px; 
     width: 200px; 
     height: 40px; 
     box-sizing: border-box; 
     font-size: large; 
     color: white; 
     text-align: center; 
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); 
     background: #2ecc71; 
     border: 0; 
     border-bottom: 2px solid #28be68; 
     cursor: pointer; 

     margin-bottom: 10px; 
    } 
    #spectateButton:active, #spectateButton:hover, 
    #startButton:active, #startButton:hover { 
     top: 1px; 
     background: #55D88B; 
     outline: none; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
    } 




    </style> 

</head> 
<body> 
<div id="gameAreaWrapper">   
     <canvas tabindex="1" id="cvs"></canvas> 
</div> 
<div id="startMenuWrapper"> 


      <input type="text" tabindex="0" autofocus placeholder="Enter alphanumeric characters" id="playerNameInput" maxlength="25" /></br> 
      <button id="startButton">Play</button></a>    
      <br /> 

</div> 
</body> 
</html>

почему поле ввода «playerNameInput» заблокировано?

источник

2016-06-10 user63898

'z-index' работает только на позиционированных элементах. – Harry

z-index требует position кроме по умолчанию static. Это не будет иметь никакого эффекта, если вы не установите свойство к одному из следующих способов: relative | absolute | fixed

body { 
 
    background-color: lightblue; 
 
} 
 
html, 
 
body, 
 
canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    -webkit-user-select: none; 
 
    /* webkit (safari, chrome) browsers */ 
 
    -moz-user-select: none; 
 
    /* mozilla browsers */ 
 
    -khtml-user-select: none; 
 
    /* webkit (konqueror) browsers */ 
 
    -ms-user-select: none; 
 
    /* IE10+ */ 
 
} 
 
#startMenuWrapper { 
 
    -webkit-transition: max-height 1s; 
 
    -moz-transition: max-height 1s; 
 
    -ms-transition: max-height 1s; 
 
    -o-transition: max-height 1s; 
 
    transition: max-height 1s; 
 
    overflow: hidden; 
 
} 
 
#startMenuWrapper { 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 
#gameAreaWrapper { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 0; 
 
} 
 
#playerNameInput { 
 
    width: 200px; 
 
    text-align: center; 
 
    padding: 10px; 
 
    border: solid 1px #dcdcdc; 
 
    transition: box-shadow 0.3s, border 0.3s; 
 
    box-sizing: border-box; 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    margin-bottom: 10px; 
 
    outline: none; 
 
} 
 
#startButton, 
 
#spectateButton { 
 
    position: relative; 
 
    margin: auto; 
 
    margin-top: 10px; 
 
    width: 200px; 
 
    height: 40px; 
 
    box-sizing: border-box; 
 
    font-size: large; 
 
    color: white; 
 
    text-align: center; 
 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); 
 
    background: #2ecc71; 
 
    border: 0; 
 
    border-bottom: 2px solid #28be68; 
 
    cursor: pointer; 
 
    margin-bottom: 10px; 
 
} 
 
#spectateButton:active, 
 
#spectateButton:hover, 
 
#startButton:active, 
 
#startButton:hover { 
 
    top: 1px; 
 
    background: #55D88B; 
 
    outline: none; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
}

<div id="gameAreaWrapper"> 
 
    <canvas tabindex="1" id="cvs"></canvas> 
 
</div> 
 
<div id="startMenuWrapper"> 
 

 
    <input type="text" tabindex="0" autofocus placeholder="Enter alphanumeric characters" id="playerNameInput" maxlength="25" /> 
 
    </br> 
 
    <button id="startButton">Play</button> 
 
    </a> 
 
    <br /> 
 
</div>

источник

2016-06-10 08:33:54 Turnip

Спасибо! этот css материал .... – user63898

уверен, что это спасибо – user63898

В порядке г-индексе быть применены в данном случае playerNameInput должен иметь позицию: относительный и некоторое значение z-индекса

источник

2016-06-10 08:38:25

холст внутри DIV блокирующие высшего ZIndex DIV

ответ

Смежные вопросы