position

position : 요소 배치의 기준을 설정(실제 배치는 아님)

 

position의 속성들

 

①relative : 자신의 원래 위치를 기준으로 배치

(margin처럼 밀려나는 것)

> 실제로 이동한 것이 아니라, 보이는 것만 옮겨진 것(홀로그램)

> 실제로 배치하는 것은 다른 요소가 변경되면 유동적이므로 위험(absolute를 권장)

 

②absolute : 부모요소를 기준으로 뜬 상태라고 생각하면 됨(기존 위치에서 위에 떠 있는 상황)

    > 다른 자식요소에게 영향을 주지 않음(본인은 의식함 - 순서에 영향을 받음)

    > 부모요소(position이 부여된 부모 - position: relative; 권장 / static은 안됨)를 

    기준으로 배치(top, left, right, bottom등으로 실제 배치)

    > 부모요소에 position정보를 탐색하고 없으면 viewport를 기준으로 함

 

③fixed : viewport(브라우저 전체) 기준으로 배치 / 고정배너

> background-attachment: fixed 로 배경을 고정하면, 이미지가 흐르는 듯한 효과를 줄 수 있음

    

④sticky : 스크롤 영역 전체의 특정한 영역에 위치   

 position: sticky;
 top: 0; 

상단에 고정되어서 밀려나는 방식이 됨