css変換された子Zインデックスが機能しない

Question

問題を再現する作業exampleは次のとおりです。

私はoverlay divを持っています。これはtransformed divの兄弟です。私はtransformed divの子をoverlay divに積み重ねて欲しいです。 コードスニペットは次のとおりです。

.overlay { 
    position:fixed; 
    height:100%; 
    width:100%; 
    background: rgba(0, 0, 0, .5); 
    z-index: 2; 
    top: 0; 
    left: 0; 
} 
// transformed div 
.parent { 
    width: 200px; 
    height: 200px; 
    border: 3px solid violet; 
    transform: translate(20px, 50px); 
    display: flex; 
    position: relative; 
} 

.child { 
    margin: auto; 
    width: 50px; 
    height: 50px; 
    background: yellow; 
    z-index: 10; // doesn't work 
    position: relative; 
} 

どうすれば実現できますか？

Answer 1

あなたはtransform：translateを使用する必要がありますか？トップを使用する：50ピクセル;左：20ピクセル。代わりに.overlayと同じコンテキストに親DIVを残して、.childをオーバーレイの上に並べ替えることができます。