[CSS]z-index 태그간의 화면 위치 경쟁

position:absolute 로 태그를 위치 시키다보면 

 

같은 레벨단계의 2개의 태그가 위치가 겹치기도 한다.( 상위태그랑 겹치면 하위태그가 걍 위로감)

 

이때 원하는 태그가 앞으로 나오게 하려면 z-index를 사용 하면 된다.

 

z-index 값이 높을수록 앞에서 보이는데

 

경쟁시킬 2가지 태그에 각각 z-index 값을 입력하고 앞으로 나오게 할 태그값을 더 높게 주면된다.

 

값은 그냥 정수형 100 정도 주면 된다.

ie 6과 7에서는 absolute를 감싸는 부모 relative가 있을경우 absolute의 z-index가 0으로 변경된다.

 

이것으로 인해 원하는 모습이 안나올 수도 있는데 해결하려면 부모의 z-index에게도 z-inde

 

x를 추가하면된다.

 

z-index 음수도 가능하다.

[출처] [CSS] 태그간의 화면 위치 경쟁 z-index|작성자 카루