Z- 색인을 낮추면 자손 요소가 취소 불가능하게됩니다.

Question

나는 (CSS) 스태킹 질문이 있습니다.

내 개발 사이트의 탭 상자는 z- 색인을 -1로 설정하여 테두리가 위에있는 탭 뒤에 표시되도록하여 활성 탭의 흰색 아래쪽 테두리가이를 덮도록합니다. 하지만 Opera는 모든 브라우저에서 탭 박스 (링크, 양식 등)의 자손을 끊을 수 없게 만듭니다.

http://od.philosofiles.com/

사람이 도와 드릴까요 : 당신이에서 볼 수 있습니까? -100

<ul class="odtabs"> 
    <li id="tab-Authors1" class="first active"><a href="link">Tab</a></li> 
</ul> 
<div id="tab_content-Authors1" class="odtab-content"> 
    <p><a href="link">Tab Box</a></p> 
</div> 

<style type="text/css"> 
    <!-- 
    .odtabs li { 
    float: left; 
    background-color: #ddd; 
    width: 80px; 
    height: 19px; 
    list-style-type: none; 
    } 

    .odtabs li.active { 
    background-color: white; 
    border-bottom-color: white; 
    } 

    .odtab-content { 
     border: 1px solid #babcbd; 
     margin-top: -1px; 
     clear: both; 
     position: relative; 
     top: -1px; 
     z-index: -1; 
    } 
    --> 
</style> 

Answer 1

내가 마지막으로 라인 별 재건과 실험의 많은 후,이에게 자신을 고정. 문제는 z- 색인이 부정적 인 것이 원인이라고 생각합니다. 그러나 긍정적 인 z- 인덱스와 더 높은 양의 z- 인덱스로 작동하게하는 유일한 방법은 탭에서 위치 : 상대를 설정하는 것이 었습니다. 이는 상당히 다른 접근 방식을 필요로했습니다. (분명히 z- 인덱스는 절대, 상대 또는 고정 위치 요소에서만 작동합니다.) 여기에 관심이 있거나 유사한 문제가있는 경우 사용 된 전체 CSS가 나와 있습니다.

ul.odtabs { 
    display: inline; 
    margin: 0; 
    padding: 0; 
} 

.odtabs li { 
    float: left; 
    background-color: #ddd; 
    border: 1px solid #babcbd; 
    width: 80px; 
    height: 19px; 
    margin-right: 2px; 
    text-align: center; 
    list-style-type: none; 
    position: relative; 
    z-index: 2; 
} 

.odtabs li.active { 
    background-color: white; 
    border-bottom-color: white; 
} 

.odtabs a { 
    color: #78797c; 
    font-size: 0.75em; /* 9px = 12*0.75 */ 
    font-weight: bold; 
    margin-top: 0px; 
    padding-top: 0px; 
} 

.odtabs .last { 
    margin-right: 0px; 
} 

.odtab-content { 
    font-size: 0.9166em; 
    border: 1px solid #babcbd; 
    padding: 0px 1em; /* ie. 12px */ 
    clear: both; 
    position: relative; 
    top: -1px; 
    z-index: 1; 
} 

Answer 2

설정 Z- 색인 : 방화범은 아마 더 조명 될 것으로 위의 링크를 검사하지만 여기에서, HTML과 CSS의 노출 된 뼈를합니다.

.odtab-content { 
border:1px solid #BABCBD; 
clear:both; 
font-size:0.9166em; 
margin-top:-1px; 
padding:0 1em; 
position:relative; 
top:-1px; 
z-index:-100; 
}