[CSS] position

position : 요소의 위치를 정의한다.
top, bottom, left, right 좌표 프로퍼티와 함께 사용하여 위치를 지정한다.


1) static (기본위치) : position의 기본값 
2) relative (상대위치) : static을 기준으로 좌표 프로퍼티를 사용하여 위치를 이동시킨다.

static과의 차이점은 좌표 프로퍼티 동작 여부 뿐이다.
3) absoute (절대위치) : 부모 요소 또는 가장 가까이 있는 조상요소를 기준으로  좌표 프로퍼티만큼 이동한다. 즉, relative,absolute,fixed 프로퍼티가 선언되어 있는 부모 또는  조상 요소를 기준으로 위치가 결정된다.
4) fixed (고정위치) : 부모 요소와 관계없이 브라우저 viewport를 기준으로 좌표프로퍼티를 사용하여 위치를 이동시킨다.
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은곳에 위치한다.

 

 ** fixed처리시에는 공간이 있던게 사라지기 때문에 바깥쪽에 fixed 처리하지 말고 안쪽에 fixed 처리하기

 

 

 

 

출처

poiemaweb.com/css3-position

CSS3 Position | PoiemaWeb