如何在添加叠加层后禁用 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>

- user6371206

---

你的 input 是那个 .overlay 元素的子元素。你需要将父元素定位为 relative，然后在该父元素内使用 absolute 定位来放置覆盖层。 - Joshua

使用 CSS 的 pointer-events: none; 属性，将其添加到覆盖层的类中。 - Devesh Chauhan

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>

希望这能帮到您。

- Patrick Mlr

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>

- maximast

Answer 3

一种非常简单和高效的方法，不需要额外或不必要的div，就可以使用::after伪类进行图层叠加。这使得图层处理变得非常容易。

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。

- Ojanti