중첩 된 div - 절대 위치 - Z- 인덱스

Question

중첩 된 div가 부모 div에 의해 오버레이되도록 약간의 문제가 있습니다. 여기에서 이미 검색했지만 문제가 해결되지 않습니다.

샘플 CSS :

#content { 
    position: relative; 
    top: 80px; 
    min-height: 530px; 
    width: 1000px; 
    z-index: 2; 
} 
#category { 
    position: absolute; 
    top: -30px; 
    right: 0; 
    z-index: 1; 
} 

샘플 HTML :

<div id="content"> 
    <div id="category"></div> 
</div> 

처럼 보일해야합니까 :

이

중첩 된 DIV #category이 #content의 오른쪽 상단에 충실해야하고해야 그 뒤에 있기 때문에 #content이 오버레이됩니다. 나는 그것을 처리하는 것이 가장 좋은 방법이 아니라는 것을 알고 있지만, 전체 프로젝트의 진절머리 나는 스타일로 인해 그렇게 할 필요가 있습니다 (저는 조금 조정했습니다).

미리 감사드립니다. 그것은 부모의 뒤에 자식 요소를 넣어하기 위해

Answer 1

, 당신은 z-index에 대한 음의 값을 사용할 수 있습니다

#category { 
    position: relative; 
    z-index: -1; 
} 

라이브 데모 : jsFiddle