CSS : position

CSS position

CSS의 position 프로퍼티는 HTML 문서 내의 요소의 위치를 정의하며, static, relative, absolute, fixed 등의 값으로 지정할 수 있다.

 

Static (기본위치)

position을 지정하지 않았을 때 부여되는 기본값으로, 위 -> 아래, 왼쪽 -> 오른쪽을 기본값으로 배치된다.

 

relative (상대적 위치)

요소의 기본 위치(static)를 기준으로 좌표 프로퍼티 (top, bottom, left, right)를 사용하여 위치를 이동할 수 있다.

 

absolute (절대적 위치)

position: absolute가 지정된 요소는 부모 요소 또는 가장 근접한 곳에 위치한 조상 요소의 위치를 기준으로 좌표 프로퍼티 (top, bottom, left, right)를 통해 위치를 지정할 수 있다. (이 때, 부모 요소의 position은 static 이외의 요소로 지정되어 있어야 하며, 만약 없을 경우에는 문서 전체를 기준으로 잡아 position이 지정된다)

 

* absoulte 프로퍼티는 부모 요소가 static 이외의 프로퍼티를 가질 경우에만 부모를 기준으로 위치한다. (부모, 조상이 모두 static일 경우, 문서 전체를 기준으로 지정됨 (하단 예시 참조)

1) position : absolute에서 부모 요소가 static 이외의 값(relative)일 때

2) position : absolute에서 부모 요소가 기본 위치(static)일 때의 배치 (문서 전체를 기준으로 지정됨)

 

Fixed(고정 위치)

부모 요소와 관계없이 ,브라우저 뷰를 기준으로 좌표 프로퍼티 (top, bottom, left, right)을 사용하여 위치가 지정된다.

스크롤이 내려가더라도 화면에서 사라지지 않고 항상 같은 곳에 위치하며, header, footer등에 사용할 수 있다.