HTML + CSSのz-インデックスが機能しない

私のZ-インデックスが機能しておらず、divが上（y軸上）にあり、上にはありません（z軸上）他のdiv。HTML + CSSのz-インデックスが機能しない

これはおそらく完全にはっきりしていますが、私のコードでは問題が見えません。誰かが私が間違っている場所にスポットすることはできますか？それはとても簡単なはずですが、解決策が見つからないので、私はとても不満を感じています。

<style> 
.greenleftarrow{ 
position: relative; 
z-index:10; 
display:block; 
background:#fff url(./images/greenleftarrow.jpg) no-repeat; 
left:10px; 
top: 0px; 
height:140px; 
opacity:0.5; 
filter:alpha(opacity=50); 
} 

</style> 


<body id="body1" style="position: relative; z-index:-1; height: 510px;" onload="javascript:showAndroidToast('1'); inspectLang(); getDocHeight()"> 
<div class="greenleftarrow" id="greenleftarrow" ></div> 
<div style="position: relative; z-index:-1;">body body body body</div> 
</body>

出典

2011-12-07 Elaine McGovern

ので、あなたはdiv要素の上にある矢印をしたいですか？位置を削除する：bodyとdivで相対、positionを置き換える：positionに相対：矢印上で絶対？ – ptriek

私はあなたが達成しようとしていることは本当に明確ではありません。ライブサンプル（jsFiddleなど）または画像を投稿できますか？あなたは '.greenleftarrow'を相対的に位置づけようとしていますか？私はまた、身体自体に負のz-インデックスを適用する理由を混同していますか？ – CherryFlavourPez

さて、負のz-インデックスは、1の最初のz-インデックスが無視されていたので、不満から外れていました。私は将来的により包括的な投稿のためにjsFiddleを試しなければならないでしょう。ありがとう –

矢印の位置を絶対に変更してください。

.greenleftarrow{ 
    position: absolute; 
    z-index:10; 
    display:block; 
    background:#fff url(./images/greenleftarrow.jpg) no-repeat; 
    left:10px; 
    top: 0px; 
    height:140px; 
    opacity:0.5; 
    filter:alpha(opacity=50); 
    }

出典

2011-12-07 12:18:52 Pedryk

私は欲しい！それは私がそれをすると消える！それは背景画像なのですか？ –

位置の絶対値は、一度、幅と高さの最小値を背景画像のサイズに設定した後に働きました。結局のところ、空のdivはそれだけで、空のdivです。愚かな間違い！ –

私が正しく理解していれば、あなたはgreenleftarrow上に上向きに第二のdivを移動するには負の上マージンを使用することができます。

http://jsfiddle.net/XSH2Y/

出典

2011-12-07 12:24:22 ramblex

私はそれを私に結びつけることに感謝します。お気に入りのリストに追加されています。 –

ただし、#over { margin-top：-140px; } greenleftarrowクラスの背景画像の高さを知る必要がありますか？ –

はい。 greenleftarrowに背景画像しか含まれていない場合は、2番目のdivに追加しdivに最小高さを与えます – ramblex

HTML + CSSのz-インデックスが機能しない

答えて

関連する問題