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개
발견된 문제점이 크리티컬이네요~~
써먹기엔 좀 곤란한듯....ㅎ
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2130 | 17년 전 | 1170 | ||
| 2129 |
ⓧ힘내세요
|
17년 전 | 2229 | |
| 2128 | 17년 전 | 2872 | ||
| 2127 | 17년 전 | 4055 | ||
| 2126 | 17년 전 | 3141 | ||
| 2125 | 17년 전 | 1404 | ||
| 2124 | 17년 전 | 1706 | ||
| 2123 | 17년 전 | 2235 | ||
| 2122 | 17년 전 | 1542 | ||
| 2121 | 17년 전 | 1716 | ||
| 2120 | 17년 전 | 2712 | ||
| 2119 | 17년 전 | 2138 | ||
| 2118 | 17년 전 | 1792 | ||
| 2117 |
아름다운세상
|
17년 전 | 4194 | |
| 2116 | 17년 전 | 3045 | ||
| 2115 | 17년 전 | 1435 | ||
| 2114 |
아름다운세상
|
17년 전 | 3564 | |
| 2113 | 17년 전 | 2792 | ||
| 2112 | 17년 전 | 2072 | ||
| 2111 | 17년 전 | 1287 | ||
| 2110 | 17년 전 | 2326 | ||
| 2109 | 17년 전 | 2063 | ||
| 2108 | 17년 전 | 1982 | ||
| 2107 |
휴전합시다
|
17년 전 | 1918 | |
| 2106 | 17년 전 | 1168 | ||
| 2105 |
 skinartisanCOM |
17년 전 | 1871 | |
| 2104 | 17년 전 | 2925 | ||
| 2103 | 17년 전 | 1426 | ||
| 2102 | 17년 전 | 1668 | ||
| 2101 | 17년 전 | 1353 | ||
| 2100 | 17년 전 | 1597 | ||
| 2099 | 17년 전 | 1570 | ||
| 2098 | 17년 전 | 1443 | ||
| 2097 | 17년 전 | 2554 | ||
| 2096 | 17년 전 | 2321 | ||
| 2095 | 17년 전 | 2106 | ||
| 2094 | 17년 전 | 1416 | ||
| 2093 | 17년 전 | 2426 | ||
| 2092 | 17년 전 | 4254 | ||
| 2091 | 17년 전 | 2739 | ||
| 2090 | 17년 전 | 1658 | ||
| 2089 | 17년 전 | 1849 | ||
| 2088 | 17년 전 | 3225 | ||
| 2087 | 17년 전 | 2226 | ||
| 2086 | 17년 전 | 3820 | ||
| 2085 | 17년 전 | 1671 | ||
| 2084 | 17년 전 | 2265 | ||
| 2083 | 17년 전 | 2094 | ||
| 2082 | 17년 전 | 1610 | ||
| 2081 | 17년 전 | 2125 | ||
| 2080 |
letsgolee
|
17년 전 | 1921 | |
| 2079 | 17년 전 | 1957 | ||
| 2078 | 17년 전 | 3069 | ||
| 2077 | 17년 전 | 2143 | ||
| 2076 | 17년 전 | 1434 | ||
| 2075 | 17년 전 | 1455 | ||
| 2074 | 17년 전 | 2122 | ||
| 2073 | 17년 전 | 3202 | ||
| 2072 | 17년 전 | 2135 | ||
| 2071 |
휴전합시다
|
17년 전 | 1530 | |
| 2070 | 17년 전 | 4237 | ||
| 2069 | 17년 전 | 2030 | ||
| 2068 | 17년 전 | 3457 | ||
| 2067 | 17년 전 | 6027 | ||
| 2066 | 17년 전 | 1483 | ||
| 2065 |
letsgolee
|
17년 전 | 1651 | |
| 2064 | 17년 전 | 1233 | ||
| 2063 | 17년 전 | 1347 | ||
| 2062 |
vicky
|
17년 전 | 2872 | |
| 2061 | 17년 전 | 1908 | ||
| 2060 |
카프카07
|
17년 전 | 2593 | |
| 2059 | 17년 전 | 1301 | ||
| 2058 | 17년 전 | 3183 | ||
| 2057 | 17년 전 | 2161 | ||
| 2056 | 17년 전 | 2605 | ||
| 2055 | 17년 전 | 1405 | ||
| 2054 | 17년 전 | 1751 | ||
| 2053 | 17년 전 | 1145 | ||
| 2052 |
 JCrew |
17년 전 | 1202 | |
| 2051 | 17년 전 | 1785 | ||
| 2050 | 17년 전 | 1226 | ||
| 2049 | 17년 전 | 4307 | ||
| 2048 | 17년 전 | 1504 | ||
| 2047 | 17년 전 | 2002 | ||
| 2046 |
카프카07
|
17년 전 | 7088 | |
| 2045 | 17년 전 | 1381 | ||
| 2044 | 17년 전 | 1893 | ||
| 2043 | 17년 전 | 3131 | ||
| 2042 | 17년 전 | 1220 | ||
| 2041 |
카프카07
|
17년 전 | 1982 | |
| 2040 | 17년 전 | 1152 | ||
| 2039 |
smilesol
|
17년 전 | 1847 | |
| 2038 | 17년 전 | 2145 | ||
| 2037 |
skinartisanCOM |
17년 전 | 2963 | |
| 2036 | 17년 전 | 1242 | ||
| 2035 |
 smyada |
17년 전 | 1333 | |
| 2034 |
ㅣ곰탱이ㅣ
|
17년 전 | 1558 | |
| 2033 |
 허리손반장 |
17년 전 | 1227 | |
| 2032 | 17년 전 | 4352 | ||
| 2031 | 17년 전 | 3893 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기