플로팅 레이어 구현 시 몇 가지 주의할 점

발생일: 2011.07.04

문제:
얼마 전, 페이지 중앙 하단에 떠있는 플로팅 레이어 작업을 진행한 적이 있다.
(플로팅 레이어 = 스크롤이 발생해도 같은 위치에 고정되어 있는 레이어)
작업을 진행하며 몇 가지 주의할 점이 있어 메모해둔다.

해결책:
플로팅 레이어가 페이지 하단의 가운데에 위치하기 위해 아래와 같이 마크업이 구현되어 있다고 가정한다.

<div style="position:fixed; left:50%; bottom: 0; marginLeft:-500px;">


1. IE6에서는 CSS의 fixed 속성이 적용되지 않는다.
    - IE6에서 fixed 속성을 구현하기 위한 방법.

2. IE7에서는 윈도우의 가로 사이즈가 홀수일 때, 정상적으로 위치를 찾지 못하는 버그가 있다.
    - 엘리먼트가 퍼센트를 이용한 상대 크기(%)를 사용하고, 래핑 엘리먼트의 크기가 퍼센트로 나뉘어 떨어지지 않는 경우(IE의 퍼센트 라운딩 알고리즘에 대한 포스트)
    - resize 이벤트에서 래핑 엘리먼트의 홀짝 여부를 구분해 보정해준다.

3. 가운데 정렬을 위해 위와 같이 퍼센트 값을 가진 left와 marginLeft를 이용해 마크업을 구성한 경우,
    윈도우가 컨텐츠 영역보다 작게 되는 경우(즉, 가로 스크롤바가 생기는 경우)에는 원하는 위치에 표시되지 않는다.
    이 경우에는 resize 이벤트에서 left:0; marginLeft:0; 이 되도록 한다.