a

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

· 2011-12-30 (금) 04:51:23 · 4260
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-08-29 조회 5,462
12-08-21 조회 3,450
12-08-21 조회 3,535
12-08-05 조회 3,352
12-08-04 조회 4,328
12-07-31 조회 9,207
12-07-26 조회 3,860
12-07-24 조회 3,492
12-07-20 조회 3,433
12-07-15 조회 3,302
12-07-09 조회 4,663
12-07-09 조회 3,375
12-07-09 조회 3,288
12-07-06 조회 4,105
12-07-05 조회 3,206
12-07-05 조회 3,279
12-06-30 조회 3,408
12-06-29 조회 3,205
12-06-26 조회 3,408
12-06-18 조회 3,286
12-06-18 조회 3,384
12-05-31 조회 3,596
12-05-29 조회 4,351
12-05-23 조회 3,395
12-05-22 조회 3,650
12-05-17 조회 4,447
12-05-10 조회 3,472
12-05-06 조회 3,343
12-05-04 조회 3,029
12-04-25 조회 3,481
12-04-21 조회 3,000
12-04-21 조회 4,404
12-04-20 조회 3,539
12-04-10 조회 2,955
12-04-06 조회 2,833
12-04-05 조회 3,176
12-04-05 조회 3,846
12-03-31 조회 2,973
12-03-30 조회 3,061
12-03-29 조회 2,978
12-03-28 조회 2,998
12-03-27 조회 3,317
12-03-26 조회 3,707
12-03-23 조회 2,897
12-03-20 조회 2,957
12-03-12 조회 2,885
12-03-12 조회 3,229
12-03-12 조회 3,143
12-03-12 조회 4,095
12-03-12 조회 5,612
12-03-12 조회 3,687
12-03-12 조회 5,494
12-03-12 조회 3,701
12-03-12 조회 6,058
12-03-06 조회 3,014
12-03-04 조회 4,146
12-03-02 조회 4,020
12-02-16 조회 5,130
12-02-15 조회 4,482
12-02-11 조회 2,974
12-02-08 조회 2,827
12-02-08 조회 3,844
12-02-07 조회 3,244
12-01-30 조회 2,937
12-01-29 조회 3,361
12-01-25 조회 3,355
12-01-19 조회 2,894
12-01-12 조회 3,035
11-12-30 조회 3,665
11-12-29 조회 3,031
11-12-26 조회 3,051
11-12-26 조회 2,942
11-12-17 조회 4,077
11-12-17 조회 3,268
11-12-01 조회 3,045
11-11-19 조회 4,224
11-11-14 조회 4,104
11-11-14 조회 2,726
11-11-10 조회 2,962
11-11-10 조회 3,628
11-10-27 조회 2,475
11-10-26 조회 2,583
11-10-25 조회 2,466
11-10-17 조회 3,623
11-10-10 조회 2,537
11-10-03 조회 2,591
11-09-28 조회 2,472
11-09-28 조회 3,970
11-09-26 조회 2,451
11-09-26 조회 2,569
11-09-25 조회 2,866
11-09-19 조회 6,016
11-09-09 조회 2,939
11-09-08 조회 3,301
11-08-31 조회 3,102
11-08-29 조회 5,089
11-08-25 조회 2,768
11-08-23 조회 2,450
11-08-21 조회 2,460
11-08-19 조회 2,382