이미지를 겹치게 테이블을 얻는 방법?

Question

다음은 HTML의 작은 조각입니다.

<img src="http://hss.fullerton.edu/philosophy/Red%20Square.gif" id="test1" /> 
<table id="test2"> 
    <tr><td>Test</td></tr> 
</table> 

빨간색 사각형의 이미지가 있으며 그 아래에 테이블이 겹치 길 원합니다. 여기에 CSS가 있습니다 :

#test1 { 
    width: 42px; 
    height: 42px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: -15px; 
} 

#test2 { 
    z-index: 1; 
    background-color: pink; 
    width: 80px; 
    height: 50px; 
    margin-left: auto; 
    margin-right: auto; 
} 

그러나 작동하지 않습니다 :

알 수 있듯이 이미지는 여전히 table 상단에 있습니다. 제 CSS에서 명시 적으로 테이블의 z-index를 1으로 설정했는데 여전히 이미지와 겹치지 않습니다. 내가 뭘 잘못하고 있죠?

jsFiddle :http://jsfiddle.net/george_edison/uk7Pz/

Answer 1

시도 포지셔닝 각 요소. 여기에 설명 된대로 position:relative을 각 요소에 추가하십시오. http://jsfiddle.net/8nGKk/1/