a

[css] z-index 초기값 auto 사용 주의

· 2011-12-30 (금) 04:51:23 · 4263
z-index의 초기값 auto는 0이 아닙니다. 다만 구형 IE 브라우저는 0인것처럼 작동되는 버그가 있으나, 마치 이러한 동작이 정상인줄 알고 계시는 분이 더러 있습니다. 지정하지 않은 z-index는 0이 아니라 auto입니다.

auto인 경우 자식내에 어떠한 다른 요소가 z-index 값이 있다면 부모를 무시하고 자신이 다른 z-index 값을 가진 것과 동일 선상에서 비교합니다. 만일 이때 부모가 0이라면 부모는 다른 부모와 비교하여 우선이 결정되지 자식이 관여하지 않습니다. 그러나 auto인 경우 자식은 부모를 생각하지 않고 자신의 z-index 값으로 다른 요소의 z-index와 비교하려 합니다. 

이러한 동작을 잘 이해하지 않는다면 보통 auto가 아닌 0으로 놓으면 만족스러운 결과가 될지 모르겠지만, 해당 요소내의 자식이 다른 것들에 대한 z-index로 우선 위치를 결정하지 못한다는 제약을 받게 됩니다.

해당 내용은 css2에서 css2.1로 바뀌며 변경된 내용을  담고 있기에 차이가 있습니다. 또한 음의 값인 경우, body의 배경과 content 사이에 위치할 수 있도록 바뀌었으나, 그 이전에는 body에 가려 뒤로 가게 되는 구형 브라우저 처리도 있습니다. 비슷하게 컨텐츠와 배경사이에 껴들아갈 수 있는 경우가 float에서 음의 마진 사용시 발생하는데, 이또한 CSS2.1에서 변경된 부분으로 구형 IE 브라우저는 이러한 결과를 보이지 않습니다.  

마지막으로 z-index의 중첩시 transparent에 대한 IE 처리는 독특합니다. 투명한 경우 뒤에 있는 내용을 의미상 가렸지만 선택이 가능해집니다. 

|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
12-01-22 조회 3,497
12-01-21 조회 2,795
12-01-19 조회 4,812
12-01-18 조회 2,786
12-01-18 조회 2,788
12-01-18 조회 2,994
12-01-17 조회 2,764
12-01-17 조회 2,998
12-01-14 조회 1.1만
12-01-14 조회 3,553
12-01-14 조회 3,867
12-01-11 조회 3,214
12-01-11 조회 3,072
12-01-11 조회 3,040
12-01-11 조회 3,068
12-01-11 조회 3,407
12-01-11 조회 2,629
12-01-10 조회 3,019
12-01-10 조회 2,804
12-01-10 조회 2,806
12-01-09 조회 2,768
12-01-08 조회 2,814
12-01-07 조회 2,780
12-01-06 조회 2,639
12-01-06 조회 2,761
12-01-05 조회 2,762
12-01-02 조회 2,911
11-12-29 조회 2,789
11-12-28 조회 2,794
11-12-28 조회 2,769
11-12-27 조회 2,991
11-12-23 조회 2,712
11-12-23 조회 2,747
11-12-21 조회 3,864
11-12-21 조회 2,874
11-12-19 조회 2,801
11-12-14 조회 4,145
11-12-08 조회 3,209
11-12-08 조회 4,034
11-12-07 조회 4,322
11-12-06 조회 4,224
11-12-06 조회 3,553
11-12-05 조회 3,191
11-12-05 조회 4,815
11-12-04 조회 3,136
11-12-03 조회 3,516
11-12-02 조회 3,363
11-12-02 조회 3,448
11-12-02 조회 2,788
11-12-01 조회 2,749
11-12-01 조회 3,654
11-12-01 조회 2,739
11-11-29 조회 5,626
11-11-23 조회 3,562
11-11-23 조회 3,886
11-11-22 조회 3,880
11-11-22 조회 2,943
11-11-21 조회 3,487
11-11-21 조회 2,769
11-11-18 조회 3,866
11-11-18 조회 3,042
11-11-17 조회 2,934
11-11-17 조회 2,934
11-11-17 조회 4,502
11-11-11 조회 2,798
11-11-11 조회 2,799
11-11-11 조회 3,934
11-11-11 조회 4,637
11-11-08 조회 2,906
11-11-06 조회 3,351
11-11-06 조회 3,643
11-10-21 조회 2,452
11-10-21 조회 2,353
11-10-19 조회 2,405
11-10-19 조회 3,904
11-10-08 조회 2,460
11-10-06 조회 4,138
11-10-01 조회 2,458
11-09-30 조회 2,540
11-09-29 조회 2,541
11-09-26 조회 2,399
11-09-23 조회 2,396
11-09-23 조회 2,171
11-09-22 조회 2,758
11-09-09 조회 3,039
11-08-30 조회 3,927
11-08-23 조회 2,184
11-08-12 조회 2,357
11-08-04 조회 3,946
11-07-01 조회 2,916
11-06-09 조회 2,557
11-05-17 조회 2,633
11-05-07 조회 2,938
11-04-21 조회 2,605
11-04-12 조회 2,457
11-04-11 조회 3,567
11-02-11 조회 2,697
11-02-08 조회 2,128
11-01-11 조회 2,522
10-11-26 조회 3,885