title: overflow: visible link not clickable when next to absolute position element
body: <p>I have two absolutely positioned div elements, which are placed next to each other.  The first div element has <code>overflow: visible</code> and a link with long content which flows on top of the neighboring div element.  I am trying to click on the link from the neighboring div, with no luck- in Chrome and Firefox.  This works in IE9.
  Some code example will explain what I am trying to do-</p>
  
  <pre><code>&lt;div&gt;
    &lt;a href="#"&gt;Reeeeeeeeeeeeeaallllllly Looooon Liiink Teeeext&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="two"&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>And the style sheet:</p>
  
  <pre><code>div{
  position: absolute;
  height: 50px;
  width: 80px;
  border: 2px solid;
  overflow: visible;
  white-space: nowrap;
  z-index: 1;
  }
  .two{
  left:82px;
  }
  a{
  z-index: 2;
  }
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/yzSwL/1/" rel="nofollow">http://jsfiddle.net/yzSwL/1/</a></p>
  
  <p>Any suggestions?  I thought z-index might help, but no.  The link text is also not selectable when the mouse is over the second div.</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Actually my scenario is more complex then I let on, since I didn't realize where the answers would go.  Pointer-events looks like the cleanest solution, but unfortunately I can not use it since all the divs might have links in them.</p>
  
  <p>A more realistic jsfiddle: <a href="http://jsfiddle.net/yzSwL/6/" rel="nofollow">http://jsfiddle.net/yzSwL/6/</a></p>
  
  <p>Just to explain what I am trying to get at- I am making a schedule app with an hour grid with a lot of positioned divs next to each other.  Each div could have a link in it.  The width of the link is the length of the appointment.</p>