Z- 인덱스가있는 형제의 아래에 절대적으로 배치 된 요소를 어떻게 배치 할 수 있습니까?

Question

콘텐츠에 왼쪽 사이드 바가있는 레이아웃이 있습니다. 사이드 바는 절대적으로 위치하며 너비는 200 픽셀이며 콘텐츠의 너비는 200 픽셀입니다. 그게 다 멋지 네요,하지만 방금 네비게이션을 움직이기 시작 했으니 콘텐트 아래에서 밀어 넣기를 원합니다. 바이올린을보십시오.

문제는 절대 위치에 관계없이 사이드는 각각 1 및 2로 Z- 색인을 설정 콘텐츠 상기 , 된다.

사이드 바의 z- 인덱스를 -1로 설정하면 올바르게 슬라이드되지만, 부모 아래에 위치하므로 탐색이 끊어지지 않습니다.

fiddle

<div class="parent"> 
    <aside class="animated fadeInRight"> 
    ... navigation ... 
    </aside> 
    <main> 
    ... content ... 
    </main> 
</div> 

어떻게 부모 위의 내용 아래에서의 사이드 슬라이드를 가지고 있지만합니까?

Answer 1

아하! 나는 그것을 알아 냈다. w3schools으로 당

...

참고 Z- 색인에만 위치 요소 (: 절대 위치 : 상대적 또는 위치 : 고정 위치)에서 작동한다.

그래서 단순히 위치 추가 : 상대 <main> 수정 그것에.

Updated fiddle

Answer 2

위치를 추가하는 경우 : 상대; 기본 상자에 z- 색인 CSS가 적용됩니다. 현재 가지고있는 방식에 따라 위치 스타일이 추가되어야하기 때문에 Z- 인덱스가 작동하지 않습니다.