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

【问题标题】：Z-index bug when hover in Opera and Chrome在 Opera 和 Chrome 中悬停时出现 Z-index 错误
【发布时间】：2015-05-09 00:27:30
【问题描述】：

.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

【问题讨论】：

标签： css google-chrome z-index opera opera-blink

【解决方案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 类中。

【讨论】：