Bootstrapped网页已输入禁用，由于职位：相对

Question

你好我一个简单但恼人的问题。我设法使用css和bootsatrap来创建我想要的响应式网页。但是，当我使用位置：相对我的输入（文本字段）被禁用。任何想法为什么？

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

Answer 1

这是因为z-index: -1;。其设定为负值。

就让它像阳性：

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

还是看看下面的代码片段：

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

希望这有助于！