在CSS或HTML中，重叠的图像跨越表格单元格边界

Overlap images cross over table cell border in CSS or HTML

本文关键字：跨越 图像 表格 单元格 边界 重叠 CSS HTML      更新时间：2023-09-26

我现在有这个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完成吗？如果是，你能举个例子吗？非常感谢。

类似这样的东西：

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

z索引控制深度顺序，较高的z索引项出现在编号较低的z索引项目前面。

相关文章：