重疊的圖像跨CSS或HTML中的表格單元格邊框

Question

我目前擁有此HTML表格（使用Javascript）和CSS，它們在單元格中生成綠色箭頭。

<table> 
    <tr> 
     <td></td> 
     <td><div id="ArrowImage1"></div><td> 
     <td><div id="ArrowImage2"></div><td> 
     <td><div id="ArrowImage3"></div><td> 
     <td><div id="ArrowImage4"></div><td> 
     <td></td> 
    </tr> 
</table> 

#ArrowImage1 { 

    background: url(../images/greenArrow.png) no-repeat; 
    width: 80px; 
    height:80px; 
    float: left;  
} 
#ArrowImage2 { 

    background: url(../images/greenArrow.png) no-repeat; 
    width: 80px; 
    height:80px; 
    float: left;  
} 
#ArrowImage3 { 

    background: url(../images/greenArrow.png) no-repeat; 
    width: 80px; 
    height:80px; 
    float: left;  
} 
#ArrowImage4 { 

    background: url(../images/greenArrow.png) no-repeat; 
    width: 80px; 
    height:80px; 
    float: left;  
} 

但是，我試圖使箭頭重疊在彼此的頂部從左到右單元格。 （圖像是透明的）。我如何處理這個問題，以便恰當地跨越邊界重疊圖像？或者這可以通過Javascript完成？如果是這樣，你可以參考一個例子嗎？謝謝！

Answer 1

像這樣：

img { 
position: absolute; 
left: 0px; 
top: 0px; 
z-index: -1; 
} 

的z索引控制的深度順序，更高的z索引項出現在較低編號z索引項的前面。