在 Opera 和 Chrome 中悬停时的 Z-index 错误

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.

似乎存在错误

这是一个link：http://chapuadevil.comoj.com/blog.html

Answer 1

position: static 项的 z-index 将无法正常工作，元素索引将简单地遵循 HTML 的流程。

将 position:relative 添加到您的 .blog-box:hoverclass

.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 class 中。