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개
발견된 문제점이 크리티컬이네요~~
써먹기엔 좀 곤란한듯....ㅎ
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2230 | 16년 전 | 1288 | ||
| 2229 | 16년 전 | 2160 | ||
| 2228 | 16년 전 | 3222 | ||
| 2227 | 16년 전 | 2165 | ||
| 2226 | 16년 전 | 1748 | ||
| 2225 | 16년 전 | 1508 | ||
| 2224 |
 ideaman |
16년 전 | 2043 | |
| 2223 | 16년 전 | 4723 | ||
| 2222 | 16년 전 | 1405 | ||
| 2221 |
 RINIX |
16년 전 | 2142 | |
| 2220 |
RINIX |
16년 전 | 2131 | |
| 2219 |
RINIX |
16년 전 | 2400 | |
| 2218 |
RINIX |
16년 전 | 2145 | |
| 2217 |
RINIX |
16년 전 | 4434 | |
| 2216 |
RINIX |
16년 전 | 2921 | |
| 2215 | 16년 전 | 2862 | ||
| 2214 | 16년 전 | 1594 | ||
| 2213 | 16년 전 | 1236 | ||
| 2212 |
RINIX |
16년 전 | 3941 | |
| 2211 |
RINIX |
16년 전 | 1614 | |
| 2210 |
RINIX |
16년 전 | 1602 | |
| 2209 | 16년 전 | 2107 | ||
| 2208 | 16년 전 | 1878 | ||
| 2207 |
letsgolee
|
16년 전 | 1489 | |
| 2206 |
RINIX |
16년 전 | 3913 | |
| 2205 | 16년 전 | 1753 | ||
| 2204 | 16년 전 | 3133 | ||
| 2203 | 16년 전 | 3019 | ||
| 2202 | 16년 전 | 1040 | ||
| 2201 | 16년 전 | 1844 | ||
| 2200 | 16년 전 | 1589 | ||
| 2199 |
 MindMap |
16년 전 | 1849 | |
| 2198 |
태양의서쪽
|
16년 전 | 2634 | |
| 2197 |
태양의서쪽
|
16년 전 | 3016 | |
| 2196 |
태양의서쪽
|
16년 전 | 3218 | |
| 2195 | 16년 전 | 3324 | ||
| 2194 | 16년 전 | 1459 | ||
| 2193 |
letsgolee
|
16년 전 | 1417 | |
| 2192 | 16년 전 | 2254 | ||
| 2191 | 16년 전 | 1972 | ||
| 2190 |
 cmpanel |
16년 전 | 2287 | |
| 2189 | 16년 전 | 2808 | ||
| 2188 |
Sizkein
|
16년 전 | 3260 | |
| 2187 |
letsgolee
|
16년 전 | 2356 | |
| 2186 |
Sizkein
|
16년 전 | 1632 | |
| 2185 |
Sizkein
|
16년 전 | 3203 | |
| 2184 |
Sizkein
|
16년 전 | 3061 | |
| 2183 | 16년 전 | 3039 | ||
| 2182 | 16년 전 | 3908 | ||
| 2181 | 16년 전 | 2580 | ||
| 2180 |
 skinartisanCOM |
16년 전 | 2401 | |
| 2179 | 16년 전 | 2650 | ||
| 2178 | 16년 전 | 2894 | ||
| 2177 | 17년 전 | 2612 | ||
| 2176 | 17년 전 | 1451 | ||
| 2175 | 17년 전 | 1892 | ||
| 2174 | 17년 전 | 1485 | ||
| 2173 |
skinartisanCOM |
17년 전 | 1910 | |
| 2172 | 17년 전 | 2507 | ||
| 2171 | 17년 전 | 8691 | ||
| 2170 | 17년 전 | 3149 | ||
| 2169 | 17년 전 | 4236 | ||
| 2168 |
cmpanel |
17년 전 | 1977 | |
| 2167 | 17년 전 | 3655 | ||
| 2166 |
cmpanel |
17년 전 | 1547 | |
| 2165 | 17년 전 | 1383 | ||
| 2164 | 17년 전 | 2319 | ||
| 2163 | 17년 전 | 1314 | ||
| 2162 | 17년 전 | 1635 | ||
| 2161 | 17년 전 | 1454 | ||
| 2160 | 17년 전 | 2525 | ||
| 2159 |
inxps
|
17년 전 | 1491 | |
| 2158 |
inxps
|
17년 전 | 1091 | |
| 2157 | 17년 전 | 1220 | ||
| 2156 | 17년 전 | 3094 | ||
| 2155 | 17년 전 | 2166 | ||
| 2154 | 17년 전 | 1971 | ||
| 2153 |
 똥싼너구리 |
17년 전 | 1219 | |
| 2152 |
letsgolee
|
17년 전 | 2453 | |
| 2151 | 17년 전 | 1170 | ||
| 2150 |
아름다운세상
|
17년 전 | 1124 | |
| 2149 |
아름다운세상
|
17년 전 | 1367 | |
| 2148 |
아름다운세상
|
17년 전 | 2733 | |
| 2147 |
 넥스트스텝 |
17년 전 | 2396 | |
| 2146 | 17년 전 | 2483 | ||
| 2145 | 17년 전 | 1183 | ||
| 2144 | 17년 전 | 1300 | ||
| 2143 | 17년 전 | 3242 | ||
| 2142 | 17년 전 | 2830 | ||
| 2141 | 17년 전 | 4107 | ||
| 2140 | 17년 전 | 2256 | ||
| 2139 | 17년 전 | 2347 | ||
| 2138 | 17년 전 | 1395 | ||
| 2137 | 17년 전 | 2513 | ||
| 2136 | 17년 전 | 2200 | ||
| 2135 | 17년 전 | 2959 | ||
| 2134 |
아름다운세상
|
17년 전 | 2468 | |
| 2133 |
Juinjang
|
17년 전 | 1629 | |
| 2132 | 17년 전 | 2429 | ||
| 2131 | 17년 전 | 1588 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기