css position

position은 부모로 부터 상속 받지 않는다. 

 

static: 기본값, 전적으로 페이지의 흐름을 따른다. top,bottom,left,right,z-index의 속성의 영향을 받지 않는다. 

relative: 원래 위치를 기준으로 top~right의 속성값이 적용 된다. 요소의 위치는 이동하지만, 요소가 차지하는 공백의 위치는 유지됩니다.

absolute: static이 아닌 첫 부모를 기준으로 top~right의 속성값이 적용 된다. 페이지의 흐름을 벗어난다. 즉 부모가 absolute나 relative이면 그 속성을 기준으로 position 속성값이 적용 된다. 

fixed: 어떤 부모요소가 아니라 view port를 기준으로 한다. 즉, 스크롤을 해도 위치가 변하지 않는다. (popup 창등)

sticky: 어디까지 scroll이 될 수 있는지..  scroll 기준을 속성값이 적용된다. 만약 부모 요소가 있으면, 부모 요소에 걸리면 더 이상 속성값이 적용 되지 않는다. 그래서 가장 바깥쪽에 있는것이 이상적이다. 

z-index: static이 아닌 요소들간 위아래 배치 순서를 지정한다.