position 을 알아보자

CSS 에서 position 자료형은 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표

좌표? 뭔말인가... 그냥 문서 상에 요소를 배치하는 방법을 지정하는 거.,.. 라고 한다.

position은 요소의 위치를 옮기고 싶을때 사용

 

각 속성들로 알아보자..

 

1. position - fixed

 

박스 요소의 포지션을 화면상 위치를 고정시켜줌

최종 위치는 top, right, bottom, left로 값을 지정 할 수 있고 위치를 지정하면

다른 박스 레이어에 간섭을 할 수 있다. 

fixed가 적용된 박스가 가장 위 레이어가 됨.

 

2. position - static

 

레이아웃의 박스를 처음 위치에 계속둔다. position의 default값

top, right, bottom, left, z-index속성이 아무런 영향을 주지 않는다.

 

3. position - relative

 

처음 포지션 좌표를 기준으로 top, right, bottom, left 값에 따라 오프셋을 적용한다.

오프셋은 다른 요소에 영향을 주지 않음

따라서 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.

 

4. position - absolute

 

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃 공간도 배정하지 않는다.

대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다.

단 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다.

최종 위치는 top, right, bottom, left값으로 지정

 

absolute는 가장 가까운 relative 부모를 기준으로 이동시킴(relative 부모가 없다면 body를 기준으로 이동)