How can I cover with overlay specific div?

Question

I'd like to cover with overlay a specific div where width and height of that div is variable. How can I do that?

Here is the fiddler for reference.

.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

You can get it with positioning parent and overlay container, when width and height is variable. Set parent .c1 position as relative and the .overlay position as absolute. Check below snippet for reference.

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