HTML + CSS z-index不起作用

我有一個非常討厭的問題，那就是我的z-index不工作，div坐在上面（在y軸上）而不在上面（在z軸上）另一個分區。HTML + CSS z-index不起作用

這可能會完全明顯，但我看不出我的代碼有問題。任何人都可以發現我要去哪裏嗎？它應該很容易，但我很沮喪，因爲我找不到解決方案。

<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，並替換位置：相對於位置：箭頭上的絕對位置？ – 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。愚蠢的錯誤！ –

如果我理解正確的話，你可以用一個負上邊距向上移動的第二個div到greenleftarrow：

http://jsfiddle.net/XSH2Y/

來源

2011-12-07 12:24:22 ramblex

我愛jsfiddle感謝鏈接到我。它被添加到我的收藏夾列表中。 –

儘管如此，使用#over快速的問題margin-top：-140px; }我需要知道greenleftarrow類中背景圖片的高度嗎？ –

是的。如果greenleftarrow只包含背景圖片，您可以將其添加到第二個div並給div一個最小高度 – ramblex

HTML + CSS z-index不起作用

回答

相關問題