html - Marvel 设备按钮和屏幕输入不可点击

Question

我正在尝试将“拨号盘”放入此设备的屏幕中:

请在此处查看 demo

<div class="marvel-device iphone6plus silver">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>

    <div class="screen">
          <div class="inscreen">
                  <input type="text">
                  <button class="btn btn-success screen">sjdaklfjaslkjf</button>
          </div>
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>

屏幕的css如下:

.marvel-device .screen {
    width: 100%;
    position: relative;
    height: 100%;
    color: white;
    z-index: 2;
    text-align: center;
    display: block;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 0 0 3px #111;
    box-shadow: 0 0 0 3px #111;
}

.inscreen {
  color: black;
  background: blue;
}

问题是屏幕内的按钮不可点击且输入字段不可聚焦。有人知道如何进行这项工作吗？

我已经用 z-Index 等尝试了几件事，但似乎没有任何效果

Answer 1

将 z-index: 3 添加到 .marvel-device .screen。

JSFIDDLE

.marvel-device .screen {
    width: 100%;
    position: relative;
    height: 100%;
    color: white;
    z-index: 3;
    text-align: center;
    display: block;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 0 0 3px #111;
    box-shadow: 0 0 0 3px #111;
}

之所以需要设置 z-index: 3 是因为在 .marvel-device.iphone6:after 上设置了 z-index: 2，所以 .marvel-device.iphone6:after 位于 .marvel-device .screen 之上。