添加疊加層後，如何禁用div元素？

Question

我試圖在我的表格上疊加覆蓋。基本上我不希望用戶訪問表單，只是通過添加覆蓋來阻止內容。我添加了疊加，但我仍然可以在輸入字段中輸入。我如何阻止？

.overlay { 
 
    background: rgba(0, 0, 0, .75); 
 
    text-align: center; 
 
    opacity: 0; 
 
    width: 100 %; 
 
    height: 100 %; 
 
    -webkit-transition: all 0.3s ease - in -out; 
 
    -moz-transition: all 0.3s ease - in -out; 
 
    -o-transition: all 0.3s ease - in -out; 
 
    -ms-transition: all 0.3s ease - in -out; 
 
    transition: all 0.3s ease - in -out; 
 
    opacity: 1; 
 
}

<h1>Hello Plunker!</h1> 
 
<div class="overlay"> 
 
    <input type="text">First name 
 
</div>

Answer 1

喜歡這個？

.content { 
 
    text-align: center; 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    -webkit-transition: all 0.3s ease - in -out; 
 
    -moz-transition: all 0.3s ease - in -out; 
 
    -o-transition: all 0.3s ease - in -out; 
 
    -ms-transition: all 0.3s ease - in -out; 
 
    transition: all 0.3s ease - in -out; 
 
    opacity: 1; 
 
} 
 

 
.overlay { 
 
    background: rgba(0, 0, 0, .75); 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<h1>Hello Plunker!</h1> 
 
<div class="content"> 
 
    <div class="overlay"> 
 
    </div> 
 
    
 
    <input type="text">First name 
 
</div>

希望這有助於。

Answer 2

嘗試僞類後使用::這個

.wrapper { 
 
    position: relative; 
 
} 
 
.overlay{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.form-wrapper { 
 
    text-align: center 
 
}

<div class="wrapper"> 
 
    <div class="overlay"></div> 
 
    <div class="form-wrapper"> 
 
    <input type="text">First name 
 
    </div> 
 
</div>

Answer 3

一個非常簡單的&高效這樣做，無需額外&不必要的div的方式。 它使分層非常容易。

HTML

<div class="form"> 
    First name 
    <input type="text"> 
</div> 

CSS

.form{ 
width:300px; /*Or what ever width you choose*/ 
height:400px;  /*Or what ever height you choose*/ 
position: relative; 
z-index:1; 
} 

.form:after{ 
position:absolute; 
height: 100%; 
width:100%; 
content:''; 
z-index:5; /* Make sure this value is higher than the .form class */ 
top:0; 
left:0; 
} 

這是應該做的吧:) 這裏是一個工作演示一個fiddle。