覆蓋導致按鈕變得不可點擊

Question

我遇到了在圖像上應用顏色疊加之後，內容（如按鈕）不再可點擊的問題。我已將範圍縮小到.overlay：之前的 CSS代碼。當我註釋掉這段代碼時，我可以再次點擊按鈕。但是，我無法弄清楚代碼中的確切原因。任何幫助將非常感激！

的jsfiddle：http://jsfiddle.net/suomyone/3ewzur9b/1/

這裏的HTML：

<section class="overlay blue2" id="contact" name="contact"> 
    <img src="http://placehold.it/300x200" /> 
    <h3>Contact</h3> 
    <p><b>T:</b> ###-###-####</p> 
    <p><b>F:</b> ###-###-####</p> 
    <button type="button" class="contactButton">Contact Us</button> 
</section> 

這裏的CSS：

.overlay { 
    position: relative; 
} 

.overlay:before { 
    position: absolute; 
    content: " "; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

.blue2 { 
    background-color: rgba(36, 131, 178, 0.9); 
} 

#contact { 
    color: #fff; 
    width: 500px; 
    height: 300px; 
    padding: 1.875em 2.8125em 0 2.815em; 
    overflow: hidden; 
} 

#contact img { 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    position: absolute; 
    z-index: -1; 
} 

.contactButton { 
    color: #fff; 
    font-size: 0.864375em; 
    text-transform: uppercase; 
    width: 10.55676em; 
    height: 1.80766em; 
    margin-top: 10px; 
    background-color: #F7CB5F; 
    border: 1px solid #F7CB5F; 
    border-radius: 7px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    cursor: pointer; 
} 

.contactButton:hover { 
    background-color: #2483B2; 
    border: 1px solid #2483B2; 
} 

.contactButton:active { 
    position: relative; 
    top: 1px; 
} 

Answer 1

給這個按鈕之外，則默認值（靜態）的位置，並回應說：

.contactButton { 
    color: #fff; 
    font-size: 0.864375em; 
    text-transform: uppercase; 
    width: 10.55676em; 
    height: 1.80766em; 
    margin-top: 10px; 
    background-color: #F7CB5F; 
    border: 1px solid #F7CB5F; 
    border-radius: 7px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    cursor: pointer; 
    position: relative; /* NEW */ 
} 

jsFiddle example