Невозможно щелкнуть текстовое поле с отрицательным z-индексом

Question

У меня есть текстовое поле в середине экрана, но когда я нажимаю на него, никакие клики не регистрируются. Я думаю, что это проблема CSS Z-Index. Как мне пройти диагностику и устранить эту проблему?

JsFiddle

div#container {
    z-index:-1;
    position:relative;
    height:300px;
    width:300px;
    margin:0 auto;
    background-color: #E9E9E9;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
    padding-top: 8px;
}
h2 {
    text-align:center;
}
#container input[type="submit"] {
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
    width:100%;
}
#container input[type="text"], #container input[type="password"] {
    position:absolute;
    outline:0;
    border:none;
    padding:0;
    margin:0;
    height:50px;
    top:50px;
    width:100%;
}
#container input[type="password"] {
    top:150px;
}
.overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    height:100%;
    width:100%;
    background:gray;
    text-align:center;
    line-height:300px;
    box-shadow:inset 0 120px 0 0 darkgray, inset 0 122px 0 0 gray, inset 0 124px 0 0 darkgray, inset 0 -120px 0 0 darkgray, inset 0 -122px 0 0 gray, inset 0 -124px 0 0 darkgray;
}
body:hover .overlay {
    display:none;
}

<div id="container">
     <h2>LOGIN</h2>

    <input type="text" id="name" placeholder="Enter your Name" />
    <input type="password" id="password" placeholder="Enter your Password" />
    <input type="submit" id="submit" value="Login" />
    <div class="overlay">LOGIN HERE</div>
</div>

Моя проблема в том, что я не могу нажать на входы. Я попытался поэкспериментировать с макетом, но мне кажется, что входные данные «кликабельны».

Может ли кто-нибудь объяснить, как можно решить эту проблему?

Answer 1

Z-индекс следует использовать при наложении фактических элементов поверх / позади других элементов, и на самом деле не следует давать отрицательное значение для входных данных - особенно когда ваш элемент body (я считаю) будет по умолчанию равен 0.

Это означает, что установка значения ниже 0 (т.е. отрицательное значение) будет означать, что ваш элемент будет расположен позади тела .

Таким образом, если бы это был элемент ввода, вы бы не смогли щелкнуть по нему, поскольку 'вы бы щелкнули по телу вместо , а не по факту.

---

В тех редких случаях, когда вы вводите z-индекс на вход (большую часть времени вам не нужно объявлять его), вместо того, чтобы устанавливать отрицательное значение, попробуйте вместо этого использовать низкое положительное значение. Таким образом, должно быть выше тела (если это не было изменено).

Вот краткий пример:

body {
  background: tomato;
}
input {
  z-index: -2;
  position: relative;
}

<input type="text" placeholder="i'm unclickable!" />

---

Используя положительное значение (0 или больше), вы можете выбрать текстовое поле

body{
  background:tomato;
  }
input{
  position:relative;
  z-index:0;
  }

<input type="text" placeholder="i'm now clickable!"/>

В приведенном выше примере вы можете в конечном итоге полностью удалить z-index.

Для получения дополнительной информации о z-index свойстве, пожалуйста, обратитесь к документации

---

Решение JsFiddle

Answer 2

Проблема связана со свойством z-index элемента div#container, назначенным как -1.

Установите для z-индекса элемента более высокое значение, например 1000 и т. Д.

div#container {

    background-color: #E9E9E9;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
    clear: left;
    height: 75px;
    margin: 0 auto 13px;
    overflow: auto;
    padding-top: 8px;
    position: relative;
    text-align: center;
    width: 510px;
    z-index: 1000;
}