Css webkit转换中的z索引

我正在制作一个页面，该页面由浮动在同一方向上的div组成，每个div具有指定的宽度，以便创建网格。我尝试了-webkit缩放效果，以便对任何悬停的div和其他降低不透明度的div产生缩放效果

当堆叠在一起的div中，当顺序排在第一位的div悬停时，由于缩放，它与后续div部分重叠（不透明度降低），就会出现问题

下面是一个示例代码 html

和jquery

    function tile_mouseover()
    {
    $(this).siblings('.tile').stop(true,true).animate({'opacity':'0.5'},300);
    $(this).stop(true,true).animate({opacity:1},200)
    }

在实施上述准则时， 当div1处于悬停状态时，它将被缩放，并与div2重叠

---

有什么可能的解决办法吗？

我认为这应该行得通

.tile {
  position: relative;
}
.tile:hover{
  z-index:2;
}

---

您在.tile类上声明了两次边距，请按如下方式进行修复：

.tile{
width:100px;
margin:6px;
float:left;
height:100px;
-webkit-transition: all .1s ease-in-out .1s; 
-moz-transition: all .1s ease-in-out .1s;   
}

.tile {
  position: relative;
}
.tile:hover{
  z-index:2;
}

.tile{
width:100px;
margin:6px;
float:left;
height:100px;
-webkit-transition: all .1s ease-in-out .1s; 
-moz-transition: all .1s ease-in-out .1s;   
}