• position은 보통 top, right, bottom, left 속성과 함께 사용한다
• position의 속성이 static인 경우에는 top, right, bottom, left 속성이 무시된다
• position 속성의 기본값은 static이다

1. 문서 흐름에 따른 기본 위치이다 (기본값)
2. top, right, bottom, left 위치 속성은 무시된다

1. 부모 요소가 있을 경우 첫 번째 부모 요소 기준으로 배치된다(static을 제외 한 속성)
2. 첫 번째 부모 요소가 없을 경우에는 브라우저 윈도우 기준으로 동작한다 (static을 제외 한 속성)
3. 스크롤시 위치가 변경된다
4. 정확한 위치는 top, right, bottom, left 속성을 이용해 설정한다
5. 위치 설정시 해당 요소의 다음에 있던 요소가 그 자리를 차지한다

1. static 요소에서 top, right, bottom, left에 의한 상대적인 위치에 배치된다
2. 정확한 위치는 top, right, bottom, left 속성을 이용해 설정한다
3. 해당 요소의 기본 위치는 빈 공간으로 유지된다

1. 항상 브라우저 윈도우 위치를 기준으로 배치된다
2. 정확한 위치는 top, right, bottom, left 속성을 이용해 설정한다
3. 해당 요소의 다음에 있던 요소가 그 자리를 차지한다
4. 아래와 구조와 같이 사용하는 경우 홈페이지의 로딩이 늦어지는 원인이 될 수 있다

<div style="position:relative;">
  <div style="position:fixed; background:red;">
    <div style="position:absolute; top:-60px; left:-100px; padding:0px">
      Example        
    </div>
  </div>
</div>

1. relative 처럼 배치되다가 스크롤 시 설정 된 top, left 값 위치 도달시 고정된다. right, bottom 값은 적용되지 않는다
2. 스크롤 상당 고정 메뉴를 만들때 주로 사용된다
3. 브라우저에 따라 overflow: hidden 또는 overflow: auto 일 경우 동작이 되지 않을 수 있다

• 속성을 부모로부터 상속받은 경우 상속값으로 설정되고 아닐 경우 초기값으로 재설정된다

• 부모 요소의 속성 상속이다

• 속성 초기화이다

CSS 컨텐츠 중앙정렬 방법 모음