title: Only some elements affected by semi-transparent overlay
body: <p>I'm trying to make a search overlay for my single page Vue application. On click, an overlay in rendered by Vue.</p>
  
  <p>CodePen: <a href="https://codepen.io/cyruscuenca/pen/YdVjaq" rel="nofollow noreferrer">https://codepen.io/cyruscuenca/pen/YdVjaq</a></p>
  
  <p>I styled the overlay like this:</p>
  
  <pre><code>#searchOverlay {
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.5);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
  }
  </code></pre>
  
  <p>This is one element that is not being effected by the overlay.</p>
  
  <pre><code>#titleBar {
      width: calc(100% - 250px - 30px);
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #17202a;
      color: #D9CDC7;
      position: absolute;
      background: #212f3d;
      top: 0;
      z-index: 2;
  }
  </code></pre>
  
  <p>Check out the attached image to see what the page actually looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/KI6hZ.png" rel="nofollow noreferrer">image</a></p>
  
  <p>This is what the overlay Vue code looks like:</p>
  
  <pre><code>&lt;div id="searchBtn" v-on:click="searchOverlay = true"&gt;Find or start a chat&lt;/div&gt;
  &lt;div id="searchOverlay" v-on:click="searchOverlay = false" v-if="searchOverlay == true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is what the titlebar HTML looks like:</p>
  
  <pre><code>&lt;div id="titleBar"&gt;{{title}}&lt;/div&gt;
  </code></pre>