CSS Position (absolute / fixed / sticky / relative)

Flex
-1차원적이 배치기법을 위해 고안됨
-컨텐츠 중심

Grid
-2차원적인 배치기법
-레이아웃 중심

 

flex, grid에서 쓸 수 있는 속성 구별하기

 

static (기본값) :위치를 지정하지 않을 때 사용한다.

 

position : absolute ;

절대적인위치, 기준점 : 브라우저 좌측상단

absolute

문서끝에서의 기준에서 300, 300적용

 

position : fixed;

유리면에 포스트잇을 붙이는상황,스크롤을 움직여도 고정되어있음(기준이 내가보고잇는화면)

position : fixed;

원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다.

브라우저 화면의 상대 위치를 기준으로 위치가 결정된다

 

부모position : relative / 자식position : absoluate , left, top 지정한경우

relative : 상대적인위치, left,top위치,자신이 있던 위치에서 넣어준만큼이동

부모 : relative / 자식 : absoluate

부모에는 relative , 자식은 absolute로 부모그레이칸 위에 자식을 위치시킴.

relative : top, right, bottom, left(위, 오른쪽, 아래, 왼쪽)으로 원하는 만큼 조절할 수 있다.

 

position : sticky 헤더부분고정시

포스트잇이 유리창위에 붙인것. 자기공간이 유지되어 동생이랑 겹치지않음.

노란색(#header) position : sticky 적용시, 검정이미지가 노란색의 자리(흰색)을 침범하지않는다.

스크롤을 내리면 노란색이 상단에 고정이 되고 동생들 (#visual)가 뒤로 지나간다.

 

position : relative;

포스트잇을 문서위에 붙인것. 자기공간유지

 

검정이미지가 노란색의 자리(흰색)을 침범하지않는다.

스크롤내리면 안보임.

 

position : absolute;

포스트잇을 문서위에 붙인것. 자기공간 없어짐

검정이미지가 노란색의 자리(흰색)을 침범함.

스크롤내리면 안보임.

 

position : fixed;

포스트잇을 유리창위에 붙인것. 자기공간 없어짐

검정이미지가 노란색자리를 침범함.

스크롤을 내리면 노란색이 상단에 고정이 되고 동생들 (#visual)가 뒤로 지나간다.