title: How to create an overlay that covers only a certain container, not a whole html page?
body: <p>I'm trying to create an overlay container or modal which covers only a certain container on a page. I have this.</p>
  
  <pre><code>#overlay {
      position: fixed;
      display: none;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 2;
      cursor: pointer;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="overlay" onclick="off()"&gt;&lt;/div&gt;
  
  &lt;div style="padding:20px; border: 3px solid black;" id="my_main_div"&gt;
    &lt;h2&gt;Overlay&lt;/h2&gt;
    &lt;p&gt;Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).&lt;/p&gt;
    &lt;button onclick="on()"&gt;Turn on overlay effect&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  function on() {
      document.getElementById("overlay").style.display = "block";
  }
  
  function off() {
      document.getElementById("overlay").style.display = "none";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>But this overlay covers all the page. Whereas I want it to cover <strong>only</strong> <code>my_main_div</code> and nothing else. How can I do that?</p>