CSS 또는 HTML에서 표 셀 경계를 넘어서 겹친 이미지

Question

현재이 HTML 표 (자바 스크립트)와 셀에 녹색 화살표를 생성하는 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- 인덱스 항목의 앞에 나타난다.