なぜ「Zインデックス」は、変換有する要素に動作しない：以下移動Y（）

Question

抜粋である：

.up { 
 
    background-color: red; 
 
    height: 100px; 
 
    z-index: 100; 
 
} 
 
.down { 
 
    background-color: yellow; 
 
    height: 100px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    z-index: 1; 
 
    transform: translateY(-50%); 
 
}

<div class="up"></div> 
 
<div class="down"></div>

分かるように、.up要素がよりz-indexが高いです.down要素。しかし、.down要素はまだ何らかの形で.up要素の前に配置されています。

これについてのアイデアは誰にもありますか？これを修正するには？ positionはabsolute、relativeまたはfixedとして適用されなければならない仕事をするz-indexについては

Answer 1

1. 。 要素にposition: relative;を追加します。
2. 親子階層が存在しないため、要素を後退させるには、負の値z-indexを適用する必要があります。

デモ

.up { 
 
    background-color: red; 
 
    opacity: .5; /* For DEMO Purpose */ 
 
    height: 100px; 
 
    /* z-index: 100; /* Not required. Not work #1 */ 
 
} 
 
.down { 
 
    background-color: yellow; 
 
    height: 100px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    z-index: -1; /* Update this */ 
 
    transform: translateY(-50%); 
 
    position: relative; /* Add this */ 
 
}

<div class="up"></div> 
 
<div class="down"></div>

Answer 2

Note： z屈折率は、位置決め要素（絶対位置：相対、又は位置：固定された位置）で動作します。

ただ非静的な位置決めを持つ要素は、常にデフォルトの静的な位置決めを持つ要素の最上部に表示されますことを心に留めておくposition:relative.upにクラス

.up { 
 
    background-color: red; 
 
    height: 100px; 
 
    z-index: 100; 
 
    position: relative; 
 
    opacity: .5; 
 
} 
 
.down { 
 
    background-color: yellow; 
 
    height: 100px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    transform: translateY(-50%); 
 
}

<div class="up"></div> 
 
<div class="down"></div>

Answer 3

を追加します。

2つの要素を扱っている間は、0,1または-1の値を使用できます。高い値で自分を複雑にしてはいけません。

Answer 4

要素の塗りつぶし順序はdescribed in W3 specs in detailです。あなたの例では：

• z-index要素のいずれも配置されていないので、何の影響も与えない
• 赤いボックスは、インフロー、非配置、ブロックレベル要素は、それが最初
• ザ描かれているよう
  ：黄色いボックスが、あなたがpositionプロパティを使用しなければならない所望の順序で要素をスタックにHTML順

を変更した場合でもの上に塗られているので、変換子孫であります

.up { 
 
    background-color: red; 
 
    height: 100px; 
 
    /* http://www.w3.org/TR/css3-positioning/#painting-order, section 9 */ 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.down { 
 
    background-color: yellow; 
 
    height: 100px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    /* http://www.w3.org/TR/css3-positioning/#painting-order, section 8.3 */ 
 
    transform: translateY(-50%); 
 
}

<div class="up"></div> 
 
<div class="down"></div>