title: Issues with pointer-events and z-index
body: <p>I've been tearing my hair out for a while now trying to figure out why I can't click the links in my footer. I know my css is a bit sloppy,  but it gets the job done. There's probably a lot more efficient way to get the effect of a footer that sticks to the bottom of the page that appears <em>behind</em> all the rest of my content, but this is what I have so far:</p>
  
  <p><a href="http://jsfiddle.net/auFeV/2/" rel="nofollow noreferrer">here's my jsfiddle of my issue</a></p>
  
  <p>it looks a bit messed up in the jsfiddle, but the idea is thereI have a pointer-event:none here:</p>
  
  <pre><code>.bottomdivtransparent {
      pointer-events: none;
      width: 100%;
      top: 0px;
      height: 300px;
      left: 0;
      overflow: hidden;
      opacity: 0;
  } 
  </code></pre>
  
  <p>Which <em>should</em> make it so I can click the links, but they remain unclickable! I'm sure the error is something really simple and staring me right in the face..</p>
  
  <p>Any suggestions? Or any easier way to get the footer to appear behind all of my content but still extend about ~300px below everything?</p>
  
  <p>Thank you!</p>
  
  <p>edit: Thanks to <a href="https://stackoverflow.com/users/1430754/kasyx">Kasyx</a> and <a href="https://stackoverflow.com/users/1654265/andrea-ligios">Andrea Ligios</a> for the help -- they have determined that it works fine in Firefox but not in Google Chrome for some reason. The margin-bottom property is messing up on .bottomdiv..</p>