RagnaLugria RagnaLugria - 1 month ago 9
CSS Question

Bootstrapped webpage has input disabled due to position:relative

hello I one simple but annoying problem. I managed to use css and bootsatrap to create the responsive webpage that i wanted. However, when i used position:relative my input (text field) got disabled. Any idea why?

<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo">
<img class="img-responsive" src="uv.png">
</div>

<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group">
<label class="input-title">Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>
<div class="form-group">
<label class="input-title">Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>
</div>

.login-form {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 100px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: -1;
}

.form-input {
width: 100%;
display: block;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}


disabled text fields

Answer

This is because of z-index: -1;. Its set to negative value.

Just make it positive like:

.login-form {
  z-index: 1;
}

Or look at the snippet below:

.login-form {
    top:90px;
    position:relative;
    box-sizing: border-box;
    margin: 25px auto;
    margin-bottom:0px;
    width: 100%;
    max-width:400px;
    background-color: white;
    padding: 100px 50px 50px 50px;
    box-shadow: 1px 5px 2px #330000;
    z-index: 1;
}

.form-input {
    width: 100%;
    display: block;
    height: 35px;
    padding: 6px 12px;
    font-size: 12px;
    font-family: sans-serif;
    vertical-align: middle;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f2f2f2;
    line-height: 1.5;
}
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
        <div id="logo">
          <img class="img-responsive" src="uv.png">
        </div>

        <div class="login-form">
          <h1>United Volunteers</h1>      
          <div class="form-group">
            <label class="input-title">Username</label>
            <input type="text" class="form-input" placeholder="Username">
          </div>
          <div class="form-group">
            <label class="input-title">Password</label>
            <input type="password" class="form-input" placeholder="Password">
          </div>
        </div>     
      </div>
</div> 

Hope this helps!