a

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

· 2011-12-30 (금) 04:51:23 · 4383
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건
+
제목 글쓴이 날짜 조회
11-10-25 조회 2,508
11-10-18 조회 4,045
11-10-18 조회 2,431
11-10-15 조회 3,649
11-10-10 조회 2,707
11-10-02 조회 2,609
11-09-28 조회 2,426
11-09-24 조회 2,518
11-09-22 조회 2,412
11-09-05 조회 2,898
11-08-31 조회 2,279
11-08-31 조회 2,593
11-08-31 조회 2,446
11-08-29 조회 2,984
11-08-28 조회 2,484
11-08-25 조회 2,534
11-08-17 조회 2,250
11-08-16 조회 2,484
11-08-11 조회 2,945
11-08-07 조회 2,653
11-08-03 조회 2,360
11-07-22 조회 2,106
11-07-12 조회 3,324
11-06-27 조회 2,102
11-06-01 조회 1,768
11-05-17 조회 2,563
11-05-01 조회 2,623
11-04-28 조회 2,912
11-04-28 조회 2,970
11-04-13 조회 2,624
11-03-27 조회 2,752
11-03-27 조회 2,623
11-03-14 조회 2,040
11-03-02 조회 2,357
11-03-02 조회 2,593
11-02-27 조회 3,017
11-02-23 조회 2,397
11-02-19 조회 2,540
11-02-14 조회 4,155
11-02-03 조회 2,941
11-01-24 조회 3,891
11-01-04 조회 2,423
10-12-08 조회 5,432
10-11-15 조회 2,442
10-11-14 조회 2,628
10-11-14 조회 3,648
10-10-29 조회 3,712
10-10-19 조회 2,724
10-10-07 조회 2,554
10-10-05 조회 4,464
10-09-18 조회 2,761
10-09-18 조회 2,504
10-09-17 조회 4,914
10-09-15 조회 2,849
10-09-15 조회 2,385
10-09-15 조회 2,866
10-09-15 조회 2,700
10-09-11 조회 4,031
10-09-11 조회 2,527
10-09-11 조회 2,576
10-09-07 조회 3,846
10-09-07 조회 3,387
10-08-29 조회 2,852
10-07-01 조회 3,094
10-06-30 조회 2,499
10-06-30 조회 2,678
10-06-30 조회 3,031
10-06-13 조회 2,065
10-04-15 조회 3,237
10-04-04 조회 3,469
10-02-23 조회 3,579
10-02-09 조회 3,169
10-01-25 조회 2,680
10-01-25 조회 2,782
09-12-27 조회 4,416
09-11-23 조회 3,641
09-11-20 조회 4,883
09-08-30 조회 3,071
09-08-30 조회 3,068
09-08-12 조회 3,040
09-07-22 조회 4,095
09-07-22 조회 4,753
09-07-15 조회 5,910
09-07-11 조회 2,994
09-06-17 조회 2,726
09-06-15 조회 3,017
09-05-29 조회 3,300
09-05-11 조회 5,938
09-05-08 조회 2,694
09-04-30 조회 3,807
09-04-17 조회 3,131
09-04-04 조회 3,311
09-03-05 조회 3,694
09-02-09 조회 3,668
09-02-03 조회 6,169
08-12-27 조회 3,230
08-12-20 조회 4,311
08-11-21 조회 5,274
08-11-14 조회 2,850
08-11-03 조회 3,306