XHTML Strict에서 깊이 구현

Question

<table> 아래에 <div>을 구현하고 싶습니다. 즉, 테이블에 투명한 png가 있지만 <table> 뒤에 있으므로 div가 표시됩니다.

누구든지이 작업을 수행하는 방법을 알고 있습니까?

나는 float:left을 시도했지만 z-index은 다르지만 아무 소용이 없습니다.

Answer 1

당신은 올바른 길을 가고 있습니다. 그러나 Z- 색인을 사용할 때 요소는 절대 위치에 있어야합니다.

이

div.top { 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    left: 500px; 
    top: 50px; 
    z-index: 2 
} 

div.bottom { 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    left: 600px; 
    top: 100px; 
    z-index: 1 
} 

HTML :

<div class="top">I'm on top</div> 
<div class="bottom">I'm below</div> 

Answer 2

Z- 인덱스는 절대 위치에 작동

가

CSS ...

여기 div의 사용 예,하지만 그것은뿐만 아니라 테이블이 될 수있다 집단. position: absolute을 설정 한 다음 top, right, bottom, left 스타일을 사용하여 요소를 서로 위에 배치 할 수 있습니다.

또한, 사업부에 float: left 설정 마크 업 테이블 앞에 <DIV> 퍼팅 시도 할 수, 그 부정적인 margin-left 값을 사용하여, 사업부의 상단에 위치를, 테이블이 왼쪽으로 이동 . 예를 들어

다음 CSS를 사용하여

<div id="d1"></div> 
<div id="d2"></div> 

은 제 2 사업부는 최초의 사업부로 50 픽셀 될 것이다.

div { 
    width: 100px; 
    height: 100px; 
    border: solid 1px rgb(0, 0, 0); 
} 
#d1 { 
    float: left; 
    background-color: rgb(255, 0, 0); 
} 
#d2 { 
    float: left; 
    margin-left: -50px; 
    background-color: rgb(0, 255, 0); 
    opacity: 0.5; 
} 

두 번째 div에는 테이블이 있습니다. div로 보여주기 쉽습니다.

Answer 3

그냥 이전 두 답변에 추가하십시오. Z- 색인은 절대적으로 배치 된 요소에만 국한되지 않습니다. Z- 색인은 상대 위치 지정이있는 요소에서도 작동합니다.