どのようにポジションを獲得しますか：絶対;位置の上の要素：relative; one

Question

this fiddleで問題を確認できます。

私はZ-インデックスが2の絶対配置要素と、Z-インデックスが1の相対配置要素を持っています。相対配置要素には、絶対配置された要素が含まれています。私は、z-index：2要素がz-indexの上に表示されると考えました.1つの項目ですが、そうではありません。これを修正する方法はありますか？それで、z-インデックス：2つのアイテムが何よりもz-index：1アイテムですか？絶対位置とDIVが第二行に対してなかったので

div { 
 
    background: green; 
 
    position: relative; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 

 
span { 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 2; 
 
    position: absolute; 
 
    border: solid 1px red; 
 
    height: 70px; 
 
    background: white; 
 
}

<div> 
 
    Row 1 
 
    <span>I thought this would show above 'Row 2'</span> 
 
</div> 
 
<div> 
 
    Row 2 
 
</div>

Answer 1

あなたもz-indexを持って配置され、親要素である子にz-indexを追加すると、親z-indexは、新たな積層順序を開始し、子供z-indexはに相対的です親のz-index。この場合、z-index: 2は、親の内部の他の要素とのみ比較されます（z-index: 1）。これを回避するには、あなただけのz-indexspanに適用することができ、または最後のdivがz-index

あなたがここにhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

body { 
 
    font-family: arial; 
 
} 
 

 
* { 
 
    padding: 10px; 
 
} 
 

 
div { 
 
    background: green; 
 
    position: relative; 
 
    width: 100%; 
 
    
 
} 
 

 
div:first-child { 
 
    z-index: 1; 
 
} 
 

 
span { 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 2; 
 
    position: absolute; 
 
    border: solid 1px red; 
 
    height: 70px; 
 
    background: white; 
 
    display: inline-block; 
 
}

<div> 
 
    Row 1 
 
    <span> 
 
    I thought this would show above 'Row 2' 
 
</span> 
 
</div> 
 
<div> 
 
    Row 2 
 
</div>

Answer 2

問題がありました。私は2つのdivの周りにラッパーを追加し、position: relative;を追加しました。

.wrapper div { 
 
    background: green; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 

 
span { 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 2; 
 
    position: absolute; 
 
    border: solid 1px red; 
 
    height: 70px; 
 
    background: white; 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
}

<div class="wrapper"> 
 
    <div> 
 
    Row 1 
 
    <span>I thought this would show above 'Row 2'</span> 
 
    </div> 
 
    <div> 
 
    Row 2 
 
    </div> 
 
</div>

Answer 3

を、それについての詳細を読むことができます与えることはありません。 z-index:1を削除してください。

div { 
 
    background: green; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
span { 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 2; 
 
    position: absolute; 
 
    border: solid 1px red; 
 
    height: 70px; 
 
    background: white; 
 
}

<div> 
 
    Row 1 
 
    <span>I thought this would show above 'Row 2'</span> 
 
</div> 
 
<div> 
 
    Row 2 
 
</div>