如何覆盖特定于叠加的div？

Question

我想覆盖一个特定的div,其中div的宽度和高度是可变的.我怎样才能做到这一点？

这是小提琴手供参考.

.c1 {
  border: 1px solid red;
  padding: 10px;
  margin: 5px;
}

.overlay {
    position: relative;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);;
    opacity: 1;
}

<p>
  content before
</p>
<div class="c1">
  <div class="overlay"></div>
  <div class="c2">
    <h1>
      some content
    </h1>
    <p>
      some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay 
    </p>
    <p>
      some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay 
    </p>
  </div>
</div>
<p>
  content after
</p>

Answer 1

当宽度和高度可变时,您可以使用定位父级和叠加容器来获取它.将父.c1位置设置为relative,将.overlay位置设置为absolute.请查看下面的代码段以供参考.

.c1 {
  border: 1px solid red;
  padding: 10px;
  margin: 5px;
  position: relative;
}

.overlay {
  background-color: rgba(255, 255, 255, 0.85);      
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

<p>
  content before
</p>
<div class="c1">
  <div class="overlay"></div>
  <div class="c2">
    <h1>
      some content
    </h1>
    <p>
      some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content
      under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay
    </p>
    <p>
      some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay some content under overlay
    </p>
  </div>
</div>
<p>
  content after
</p>