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课程中。

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

1 个答案: