여러 개의 절대 위치 요소가있는 Z- 인덱스 문제

Question

절대 위치 요소 안에 있고 다른 절대 위치 요소 아래에있는 요소를 포 그라운드로 가져올 수 있습니까? 예를 들어

:

<div id="el1"> 
    <div id="test1">Test 1</div> 
</div> 
<div id="el2"> 
    <div id="test2">Test 2</div> 
</div> 

CSS :

#el1, #el2, #test1, #test2 { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#el1 { 
    z-index: 2; 
} 

#el2 { 
    z-index: 1; 
} 

#test1, #test2 { 
    z-index: 3; 
} 

모든 요소가 위치하며, 절대 제 번째 위에 누워있다. 이제 전 두 가지 테스트 요소를 포 그라운드에 갖고 싶습니다. 두 번째로는 # el2 안에 있기 때문에 z- 색인이 적용되지 않기 때문에 불가능합니다. 이 문제에 대한 해결책이 있습니까? 아니면 테스트 요소를 다른 요소 외부에 두어야합니까?

Answer 1

하위 요소는 부모 'z-index을 상속합니다. 원하는 z- 색인을 다시 선택하기 위해 마크 업 구조를 변경해야합니다.

<div id="el1"> 
</div> 
<div id="el2"> 
</div> 
<div id="test1">Test 1</div> 
<div id="test2">Test 2</div>