CSS 마술당: Position 포지셔닝 상세 설명

1. Position 각 속성 값 설명
  1. static: 기본값입니다. 요소는 정상적인 문서 흐름 규칙에 따라 배열됩니다.
  2. relative: 상대적으로 위치를 정하고 요소는 정상적인 문서 흐름에 있지만,left,top,right,bottom의 CSS 규칙을 통해 요소의 위치를 변경할 수 있습니다.
주의점: [a].원소의 원래 위치는 다른 원소에 의해 차지되지 않도록 보존된다.
                     [b]. left를 사용하면 top가 원소의 위치를 변경할 때 원소는 원래 위치의border 외곽선의 왼쪽 상단을 참고점으로 한다.
                     [c]. right, top를 사용할 때 원소의 위치를 변경할 때 원소는 원래 위치의border 외부 테두리의 오른쪽 상단을 참고점으로 한다.
                     [d]. left,bottom을 사용할 때 원소의 위치를 변경할 때 원소는 원래 위치의border 외부 테두리의 왼쪽 하단을 참고점으로 한다.
                     [e]. right,bottom을 사용할 때 원소의 위치를 변경할 때 원소는 원래 위치의border 외곽선의 오른쪽 하단을 참고점으로 한다.
  3. absolute: 절대 포지셔닝, 원소가 정상적인 문서 흐름에서 벗어나면left,top,right,bottom의 CSS 규칙을 통해 원소의 위치를 변경할 수 있습니다
주의점: [a].원소는 더 이상 원래의 위치를 차지하지 않습니다.
여기서 변수 X를 정의하면 참조점 대신 X가 사용됩니다.
조건: 요소의 offsetParent가 바디이고 바디가 CSS 포지셔닝을 하지 않으면 X=페이지;
다른 경우 X=offsetParent의 padding 외부 테두리입니다.
                     [b]. left를 사용하면 top가 원소의 위치를 변경할 때 원소는 X의 왼쪽 상단 또는 참고점으로 한다.
                     [c]. right, top을 사용할 때 원소의 위치를 변경할 때 원소는 X의 오른쪽 상단을 참고점으로 한다.
                     [d]. left,bottom을 사용할 때 원소의 위치를 변경할 때 원소는 X의 왼쪽 하단을 참고점으로 한다.
                     [e]. right,bottom을 사용할 때 원소의 위치를 변경할 때 원소는 X의 오른쪽 아래쪽을 참고점으로 한다.
  4. fixed: 고정 포지셔닝, 원소가 정상적인 문서 흐름에서 벗어나면left,top,right,bottom의 CSS 규칙을 통해 원소의 위치를 변경할 수 있습니다
주의점: [a].원소는 더 이상 원래의 위치를 차지하지 않습니다.
　　　　　　  [b]. 브라우저의 시각적 영역의 네 구석을 참조점으로 합니다.
                       [c]. IE5.5~6에서는 이 속성 값이 지원되지 않습니다.
js를 사용하여 복구할 수 있습니다. 스크롤 바 요소를 드래그해서 정정한 버그는 다음 CSS를 통해 처리해야 합니다.

* html{
     background-image:url(about:blank);
     background-attachment:fixed;
}

또는

body{
     _background-image:url(about:blank);
     _background-attachment:fixed;
}

 
2. 문서 흐름이란 무엇인가
창을 위에서 아래로 한 줄로 나누고, 각 줄에서 왼쪽에서 오른쪽으로 원소를 배출합니다. 즉, 문서 흐름입니다.부동(float left or right), 절대 포지셔닝(position:absolute), 고정 포지셔닝(position:fixed) 등 세 가지 상황에서 원소를 문서 흐름에서 벗어나게 할 수 있다.
 
3. CSS 포지셔닝
CSS 위치 지정은 요소의 포지션이 static이 아닌 것입니다.이 원소는 친자 원소의 오프셋 파렌트가 되고 손자 원소의 오프셋 파렌트가 될 기회도 있다.
 
4. 총결산
CSS 포지셔닝은 간단할 것 같지만 세부적인 부분을 무시하기 쉽기 때문에 본고는 연구 결과를 최대한 기록하고 모두 이를 충실하게 하기를 바랍니다.
오리지널 존중, 전재: http://www.cnblogs.com/fsjohnhuang/p/3967350.html^ ^뚱뚱한 John
 
5. 참고
http://www.cnblogs.com/StormSpirit/archive/2012/10/15/2715316.html