CSS - Position

원하는 위치에 Text 및 img 넣기

 - position속성을 이용하여 컨텐츠를 원하는 위치에 옮길 수 있다.(HTML element 어디에 위치 할지)

  *position : static;는 원래 기존 위치이다.(static은 정적 이라는 의미) 아무런 위치 속성을 주지 않으면 static이 적용된다.

  *position : relativ;는 기준점으로부터 위치를 옮길 수 있다.

  *position : absoulte;는 HTML 좌표(0,0)으로부터 위치를 옮길 수 있다.

  *position : fixed;는 화면에 고정을 시키는 것으로 스크롤을 움직여도 고정 되어 있다.

​

  *position : static은 기존 위치 이기 때문에 static을 없어도 지금과 같은 위치에 있다.

  *left라는 위치 값을 주어도 변하지 않는다.(left는 왼쪽으로 부터 100px를 띄우라는 의미 좌표에서 (100,0)이라고 이해하면 쉽다)

position : static; 있을 때,

 

position : static; 없을 때

 

  *position : relative;는 상대적인 위치를 갖는다.(기준점으로부터)

  *#me는 부모태그 #parent 자식이므로 부모 태그 기준으로 left : 100px; top:100px; 만큼 움직임(노란색 점(0,0))

  *우선순위를 갖는다(left > right , top > bottom) right 보단 left를 bottom 보다 top을 우선 순위를 갖는다.

  *position : absolute;는 절대적인 위치를 갖는다. 기준은 HTML 좌상단을 (0,0)이다.

  *부모태그가 있다면 절대적인 기준은 부모태그 바로 아래에 위치 한다.(absolute에 위치 포지션을 따로 주지 않는다면)

  *left : 0px; top:0px;를 넣어주면 HTML 좌상단(0,0)으로 이동한다.

  *position : absolute;를 사용하면 부모와 자식관계는 사라진다.

  *<div>은 block 타입에 대표적인 태그이지만, absolute를 사용했을 때, 자기자신의 부피만 가진다.

left : 0px; top:0px; 있을 때

  *position:fixed는 화면에 고정을 시키는 속성이다 스크롤을 내려도 고정 되어 있다.

  *부모와 관계가 끊어져서 자기자신의 부피만 가진다.

  *absolute와 유사한 관계를 가진다.

스크롤 내리지 않았을 때

 

스크롤을 내려도 #me는 top 위치에 고정 되어 있음