Adding an overlay to a div with padding

Question

I've seen answers to posts asking about overlays suggesting using position: relative on the parent div and position: absolute on the overlay div, which works fine when the parent div has no padding.

However, when the parent div does have padding, the overlay spills outside the parent div. Adding overflow: hidden, prevents the spilling, but it still looks awkward as there's white space between the overlay and the div border on the top and left of the overlay, but not on the bottom and right.

What can I do so that the overlay covers the padding on the top and left side?

.parent {
  position: relative;
  border: solid;
  border-color: green;
  padding: 10px;
  overflow: hidden;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
}

<p>
  stuff
</p>
<div class="parent">
  <div class="overlay"></div>
  <p>
    stuff under overlay
  </p>
</div>
<p>
  stuff
</p>