title: Click through an element, affecting what's behind it
body: <p>So, I was going to make an overlay thing for my website where an element is fixed over the site and placed above everything.  But this means that nothing else behind the element can be effected.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/hm6Js/1/" rel="noreferrer">JSFiddle</a> reproducing this problem.</p>
  
  <p>You'll notice that you cannot highlight the black text, and the JavaScript event doesn't fire.</p>
  
  <hr>
  
  <p>Here is the CSS + HTML I've used to create this problem:</p>
  
  <p><strong><code>HTML</code></strong></p>
  
  <pre><code>&lt;div id="main-container"&gt;
      &lt;div id="container-content"&gt;You can't highlight me! D:&lt;/div&gt;
      &lt;div id="container-fixed"&gt;&lt;div style="margin:90px auto;background:red;width:40px;height:40px;"&gt;&lt;/div&gt;You cannot highlight the text behind this DIV.  It also doesn't fire click events.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>main-container</code>: This holds the content.</p>
  
  <p><code>container-content</code>: This is the content behind the fixed DIV</p>
  
  <p><code>container-fixed</code>: This is the DIV the overlaps "container-content"</p>
  
  <p><strong><code>CSS</code></strong></p>
  
  <pre><code>#main-container {
      width: 90%;
      margin: 5%;
      position: relative;
      height: 500px;
      overflow: auto;
  }
  
  #container-content {
      width: 100%;
      height: auto;
  }
  
  #container-fixed {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      color: red;
  }
  </code></pre>
  
  <hr>
  
  <p>Is what I'm trying to achieve even possible? Both CSS and JavaScript (jQuery) answers are allowed.</p>