CSS position

CSS position 프로퍼티는 해당 요소가 화면에 어떻게 위치할 것인지를 결정한다.

• static: 요소의 default 값이며, top, right, bottom, left, z-index와 같은 값에 영향을 받지 않는다.
• relative: 초기 요소의 위치는 static인 경우와 같지만 top, right, bottom, left, z-index와 같은 프로퍼티로 오프셋을 설정할 수 있다. z-index의 값이 auto가 아닌 경우에는 stacking context를 생성한다.
• absolute: 해당 요소는 일반적인 레이아웃 구성에서 벗어나 특정 공간을 부여받지 않는다. 해당 요소는 가장 가까운 위치를 가진 부모요소를 기준으로 위치가 결정된다. 해당 요소 역시 z-index값이 auto가 아니라면 stacking context를 갖는다.
• fixed: 해당 요소는 일반적인 레이아웃 구성에서 벗어나 viewport로부터 정해진 containing block를 기준으로 상대적인 위치를 갖는다.

position을 absolute로 지정한 경우 right:0을 통해서 해당 요소의 간단한 우측 정렬을 할 수 있다.