title: CSS - Problem with background when modal parent has relative position
body: <p>I'm trying to create a modal that needs to be placed relative to a container. This is the layout in question that I want to create:</p>
  <p><a href="https://i.stack.imgur.com/jTCRT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jTCRT.png" alt="enter image description here" /></a></p>
  <p>As you can see, this popup dropdown needs to act as a modal. The problem is that it needs to sit next to the filter. For this, I used absolute positioning on the dropdown.</p>
  <p>However, since it is positioned relatively to the filters container, I am left with the dropdown completely unaccessible:</p>
  <p><a href="https://i.stack.imgur.com/uWX2h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uWX2h.png" alt="enter image description here" /></a></p>
  <p>How can I get around this? Below you can find my code:</p>
  <pre><code>.backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.2);
      z-index: 10;
  }
  
  .modal {
      position: absolute;
      width: 20%;
      height: 62%;
      z-index: 20;
  }
  
  .content-container {
      position: relative;
      width: 70%;
      top: $content-margin-top;
      z-index: 0;
  
      .filters-container {
          width: 100%;
          display: flex;
      }
  }
  </code></pre>
  <p>And my template looks something like this:</p>
  <pre><code>&lt;div class=&quot;backdrop&quot; [ngClass]=&quot;...&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;content-container&quot;&gt;
      ...
      &lt;div class=&quot;filters-container&quot;&gt;
          ...
          &lt;div class=&quot;modal&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Thank you in advance.</p>