在IE，Chrome和Firefox中使用float時被屏蔽的點擊事件

我想了解爲什麼以下示例不支持單擊Chrome 25.0或Firefox 18中的按鈕。它適用於IE 9/10。在IE，Chrome和Firefox中使用float時被屏蔽的點擊事件

我感覺好像我失去了一些非常基本的東西。 Z-指數？

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style> 
     html, body { 
      height: 100%; 
      margin: 0px; 
      overflow: hidden; 
      width: 100%; 
     } 

     .top { 
      height: 100%; 
      width: 100%; 
      overflow: hidden; 
      background: gold; 
      text-align: center; 
      vertical-align: middle; 
      z-index: 1; 
     } 
     .left { 
      float: left; 
      height: 100%; 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 80%; 
     } 

     .right { 
      float: right; 
      height: 100%; 
      position: absolute; 
      right: 0; 
      top: 0; 
     } 
    </style> 
</head> 
<body> 
    <div class="top"> 
     <button id="btn" onclick="alert('hello')">Click Me!</button> 
    </div> 
    <div class="left"> 
     left 
    </div> 
    <div class="right"> 
     right 
    </div> 
</body> 
</html>

來源

2013-03-08 Mark Lindell