CSS에는 position:fixed 라는 속성이 존재하고 이 속성이 부여된 엘리먼트는 화면에 고정되어 스크롤을 해도 움직이지 않고 항상 같은 자리에 머물게 됩니다. 흔히 "스크롤을 따라다니는 배너" 라고 표현하는 이런 UIO(User Interface Object) 따위를 코딩할 때 이 속성을 사용할 수 있는데 보통의 경우 IE6에서 지원하지 않기 때문에 별도의 자바스크립트를 추가하여 이 기능을 구현해 왔습니다. 하지만 이제는 더이상 그럴 필요가 없을것 같습니다. 자바스크립트는 전혀 사용하지 않고 CSS Hack을 사용하여 IE6 에서 position:fixed 상태의 레이어를 구현할 수 있는 팁을 발견하였습니다.
CSS Code
* { margin:0; padding:0;} /* html, body 사이의 간격을 제거 */
html { _overflow:hidden;} /* 기본 스크롤 제거 */
body{ _height:100%; _width:100%; _overflow:auto;} /* 대체 스크롤 생성 */
#content { width:580px; height:1000px; margin:20px; padding:10px; background:#eeeeee;}
#aside { position:fixed; _position:absolute; _z-index:-1; left:650px; top:20px; width:100px; height:300px; padding:10px; background:#dddddd;}
HTML Code
<div id="content">
<h1>Fixed Layer Hack for IE6</h1>
</div>
<div id="aside">
<h2>Example</h2>
</div>
이 팁의 핵심은 <html> 요소에서 발생하는 스크롤을 제거하고 <body> 요소에 스크롤을 부여하는 것입니다. <html> 에 스크롤이 붙으면 <html> 내부의 모든 콘텐트가 스크롤과 함께 움직이지만 <body> 요소로부터 발생한 스크롤은 <html> 요소를 offset(x,y) 기준점으로 삼고있는 #aside 요소의 화면배치에 아무런 영향을 주지 않습니다.
만약 <body> 요소에 position:relative 를 주게 된다면 offset 의 기준점이 <body> 가 되기 때문에 레이어를 화면에 고정할 수 없는 상태로 다시 돌아가게 됩니다. 예제 코드에서 강조 표시된 코드가 관련 코드이며 이 팁의 내용을 더욱 자세하게 이해하고 싶으시면 관련 CSS 속성을 하나씩 제거하면서 테스트 해보시기 바랍니다.
브라우저 호환정보
- Firefox2, Opera9, Safari2, IE6~7 에서 모두 동일하게 position:fixed 형태로 렌더링 합니다.
- IE5.0~IE5.5 버전의 브라우저에서는 position:absolute 형태로 렌더링 합니다.
- DTD가 Quirks Mode 상태일 때에는 적용되지 않습니다.
발견된 문제점
- 현재 코드는 IE6 핵으로서 #aside 영역에 _z-index:-1 속성을 사용하였기 때문에 IE6 에서는 #aside 영역의 텍스트를 자연스럽게 드래그 하거나 링크를 클릭할 수 없습니다. 다른 브라우저에서는 발생하지 않는 현상입니다.
- 한편 _z-index:-1 을 제거하게 되면 텍스트를 드래그 하거나 링크를 클릭하는 것이 가능하지만 화면크기를 줄였을 때 #aside 레이어가 세로 스크롤바를 덮는 현상이 발생합니다. 이 문제 역시 IE6 에서만 발생하는 현상입니다.
참조
이 저작물은 크리에이티브 커먼즈의 2.0 라이센스(저작자표시, 비영리, 변경금지)에 따라 이용하실 수 있습니다.
댓글 1개
발견된 문제점이 크리티컬이네요~~
써먹기엔 좀 곤란한듯....ㅎ
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2030 | 17년 전 | 2786 | ||
| 2029 | 17년 전 | 1593 | ||
| 2028 | 17년 전 | 1343 | ||
| 2027 | 17년 전 | 1606 | ||
| 2026 |
진정한승리
|
17년 전 | 2518 | |
| 2025 | 17년 전 | 1733 | ||
| 2024 | 17년 전 | 2015 | ||
| 2023 | 17년 전 | 1302 | ||
| 2022 |
SE7EN
|
17년 전 | 1038 | |
| 2021 | 17년 전 | 1124 | ||
| 2020 | 17년 전 | 2924 | ||
| 2019 | 17년 전 | 2465 | ||
| 2018 | 17년 전 | 2046 | ||
| 2017 | 17년 전 | 2047 | ||
| 2016 | 17년 전 | 1793 | ||
| 2015 | 17년 전 | 2245 | ||
| 2014 | 17년 전 | 2013 | ||
| 2013 | 17년 전 | 1984 | ||
| 2012 | 17년 전 | 1867 | ||
| 2011 | 17년 전 | 1204 | ||
| 2010 | 17년 전 | 1820 | ||
| 2009 | 17년 전 | 2225 | ||
| 2008 | 17년 전 | 2296 | ||
| 2007 | 17년 전 | 1639 | ||
| 2006 |
Arone
|
17년 전 | 1507 | |
| 2005 |
 저시키알바 |
17년 전 | 1353 | |
| 2004 | 17년 전 | 2572 | ||
| 2003 |
suerte
|
17년 전 | 2669 | |
| 2002 |
suerte
|
17년 전 | 2072 | |
| 2001 |
suerte
|
17년 전 | 2417 | |
| 2000 |
 미스코리아 |
17년 전 | 2721 | |
| 1999 |
미스코리아 |
17년 전 | 1323 | |
| 1998 |
 드러머찰스 |
17년 전 | 1189 | |
| 1997 | 17년 전 | 6323 | ||
| 1996 | 17년 전 | 1175 | ||
| 1995 | 17년 전 | 1627 | ||
| 1994 | 17년 전 | 1776 | ||
| 1993 | 17년 전 | 1097 | ||
| 1992 | 17년 전 | 1187 | ||
| 1991 | 17년 전 | 1888 | ||
| 1990 |
sdjsu
|
17년 전 | 1517 | |
| 1989 | 17년 전 | 3613 | ||
| 1988 |
smilesol
|
17년 전 | 1202 | |
| 1987 |
 도투꿀꿀이 |
17년 전 | 1903 | |
| 1986 | 17년 전 | 1167 | ||
| 1985 | 17년 전 | 1383 | ||
| 1984 | 17년 전 | 2358 | ||
| 1983 | 17년 전 | 2009 | ||
| 1982 | 17년 전 | 1033 | ||
| 1981 | 17년 전 | 1034 | ||
| 1980 | 17년 전 | 1085 | ||
| 1979 |
오렌지76
|
17년 전 | 6041 | |
| 1978 |
오렌지76
|
17년 전 | 5843 | |
| 1977 | 17년 전 | 2026 | ||
| 1976 |
없어씨바라
|
17년 전 | 1020 | |
| 1975 | 17년 전 | 1111 | ||
| 1974 | 17년 전 | 2077 | ||
| 1973 | 17년 전 | 1507 | ||
| 1972 | 17년 전 | 1151 | ||
| 1971 |
smilesol
|
17년 전 | 1180 | |
| 1970 | 17년 전 | 1126 | ||
| 1969 |
smilesol
|
17년 전 | 1052 | |
| 1968 |
소행성블루
|
17년 전 | 3963 | |
| 1967 |
소행성블루
|
17년 전 | 2175 | |
| 1966 | 17년 전 | 1629 | ||
| 1965 |
소행성블루
|
17년 전 | 2765 | |
| 1964 |
고양Ol아빠
|
17년 전 | 1470 | |
| 1963 | 17년 전 | 1152 | ||
| 1962 | 17년 전 | 1170 | ||
| 1961 |
choijinhee
|
17년 전 | 1241 | |
| 1960 | 17년 전 | 1125 | ||
| 1959 | 17년 전 | 1244 | ||
| 1958 |
하이웹솔루션
|
17년 전 | 2402 | |
| 1957 | 17년 전 | 4188 | ||
| 1956 | 17년 전 | 1188 | ||
| 1955 | 17년 전 | 3947 | ||
| 1954 | 17년 전 | 4098 | ||
| 1953 | 17년 전 | 1216 | ||
| 1952 | 17년 전 | 2171 | ||
| 1951 | 17년 전 | 1618 | ||
| 1950 | 17년 전 | 3211 | ||
| 1949 | 17년 전 | 1358 | ||
| 1948 | 17년 전 | 3608 | ||
| 1947 | 17년 전 | 3403 | ||
| 1946 | 17년 전 | 2572 | ||
| 1945 | 17년 전 | 2936 | ||
| 1944 | 17년 전 | 2624 | ||
| 1943 | 17년 전 | 1944 | ||
| 1942 | 17년 전 | 3310 | ||
| 1941 | 17년 전 | 2623 | ||
| 1940 | 17년 전 | 3518 | ||
| 1939 |
 r3load |
17년 전 | 1146 | |
| 1938 | 17년 전 | 2245 | ||
| 1937 | 17년 전 | 1318 | ||
| 1936 |
smilesol
|
17년 전 | 1184 | |
| 1935 |
AHEEZII
|
17년 전 | 1057 | |
| 1934 |
smilesol
|
17년 전 | 1042 | |
| 1933 | 17년 전 | 1417 | ||
| 1932 | 17년 전 | 2855 | ||
| 1931 | 17년 전 | 3250 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기