javascript - 重叠图像跨越 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-index控制深度顺序，较高的z-index 项目出现在较低编号的 z-index 项目的前面。