CSS 초보 팁 : z-index 값을 아무리 올려도 작동이 안돼요

제가 겪은  z-index가 작동하지 않는 한가지 케이스를 보여드릴게요.

 

부모와 자식 모두 position:absolute; 가 적용되어 있는 경우에는

자식의 z-index 값을 아무리 올려도 부모를 벗어나서 적용될 순 없습니다.

 

예를 들어, 만일 코드 구조가

 

<div class="parent">
	<p class="children"></p>
</div>

이렇게 부모와 자식이 있는 상태에서, 

.parent{position:absolute; z-index:0;}
.child{position:absolute; z-index:100;}

CSS가 이렇게 적용이 되어있다면,

 

child는 부모 속에 있는 요소이기 때문에

부모 밖으로 나갈 수 없는 것입니다.

 

음..지금와서 보면 참..이런 실수 왜했나 싶은데

1년전엔 .child에 z-index 값이 적용이 안되어서 99999까지 올리기도 했었죠..ㅋㅋ

 

책상 정리하다가 옛날에 다시 실수하지 말자고 메모해둔거 보고 추억돋아서 써봤습니다.