Unable to click textbox with negative z-index

Question

I have a textbox in the middle of the screen, but when I click on it, no clicks are registered. I think it's a CSS Z-Index issue. How do I go about diagnosing and fixing this issue?

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>

My issue is that I can't actually click on the inputs. I have tried playing around with the layout, but I can't seem to get the inputs 'clickable'.

Could someone explain how this issue could be resolved?

Answer 1

Z-index should be used when layering actual elements on top of/behind other elements, and shouldn't really be given a negative value for inputs - especially when your body element (I believe) will be defaulted to 0.

This means that setting a value below 0 (i.e. a negative value), would mean that your element would be placed behind the body.

So, if this was an input element, you couldn't actually click on it as 'you would be clicking on the body instead', and not actually the input.

---

In the rare occasions that you would place a z-index on an input (most of the time you don't really need to declare one), rather than setting a negative value, try using a low positive value instead. That way it should be above the body (unless this has been changed).

Here is a short example:

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

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

---

By using a positive value (0 or greater), you can then select the textbox

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

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

In the above example, you could ultimately remove the z-index altogether.

For more information on the z-index property, please refer to its documentation

---

JsFiddle Solution

Answer 2

The issue is with the z-index property of div#container element assigned as -1.

Set the z-index for the element to some higher value like 1000 etc.

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