Z-指數的錯誤時，懸停在Opera和Chrome

Question

.blog-box { 
    background-color: #fff; 
    width: 300px; 
    height:auto; 
    margin-bottom: 15px; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
} 
.blog-box:hover { 
    box-shadow: 5px 5px 10px #000; 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    transform: scale(1.1); 
    z-index: 9999; 
} 

以上是我的CSS代碼。當我懸停在一個盒子上時，它應該在其他人的頭頂上。它在Mozilla中可以正常工作，但不適用於Chrome和Opera。似乎有一個使用z-index的錯誤。

這裏是一個鏈接：http://chapuadevil.comoj.com/blog.html

Answer 1

的Z-index不會爲position: static項目正常工作，元件指數將只需按照HTML的流動。

添加position:relative您.blog-box:hover類

.blog-box:hover{ 
    box-shadow: 5px 5px 10px #000; 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    transform: scale(1.1); 
    z-index: 9999; 
    position: relative; 
} 

編輯：可能最好將其添加到您的.blog-box類代替。