ウェブキット遷移のz-インデックス

Question

私はdivを指定して、グリッドを作成するために指定された幅を持つ同じ方向にフローティングされたページで作業しています。私は、不織布を減らしている他のdivと一緒に、どんな馬鹿にされたdivにもズーム効果を持たせるために、-webkitスケールエフェクトを試していました。

問題が順に最初に来るのdivがホバーされた積層div要素のうち、それは部分的に起因

をズーミングする（減少不透明度を有する）その後継DIVを重複され、ここでサンプルコード だときに生じますHTML

<div id="div1" class="tile">Content 1</div> 
<div id="div2" class="tile">Content 2</div> 
<div id="div3" class="tile">Content 3</div> 

CSS

.tile{ 
    width:100px; 
    margin:6px; 
    float:left; 
    height:100px; 
    margin-right:0px; 
    margin-bottom:0px; 
    -webkit-transition: all .1s ease-in-out .1s; 
    -moz-transition: all .1s ease-in-out .1s; 
    } 
    .tile:hover{ 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -moz-box-shadow: 0 0 3px 1px #fff; 
    -webkit-box-shadow: 0 0 3px 1px #fff; 
    box-shadow: 0 0 3px 1px #333; 

    } 

と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によって重畳されます。

可能な解決方法はありますか？

Answer 1

これはうまくいくと思います。

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

Answer 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; 
}