Question

我不明白为什么zindex中较低的div会阻止具有更高zindex的div：这是我的简单html：

<!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>

为什么＆＃34; playerNameInput＆＃34;输入框被阻止了吗？

Answer 1

z-index需要position以外的默认static。如果您未将该属性设置为以下某个属性，则无效：relative | absolute | fixed

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

为了在这种情况下应用z-index，playerNameInput应该具有position：relative和一些z-index值

div里面的画布阻塞了更高的z-index div

2 个答案: