[CSS]z-index 위치 오류, 안될 때 해결 방법

 

<div class="AAA">
    <div class="AAA-1">
        <li>AAA-1</li>
    </div>
    <div class="AAA-2">A영역</div>
</div>
<div class="BBB">
    <div class="BBB-1">B영역</div>
</div>

 

// class별 z-index값 

AAA : z-index: 5
AAA-1 : z-index:4
AAA-2 : z-index:3
BBB : z-index:2
BBB-1  : z-index:1

 

B영역이 A영역보다 위에 올라와 버렸을 때,

부모 엘리먼트 영역(AAA)에 position:relative 를 선언 해주면 바로 해결된다.