position 속성

ㆍ position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성이다. position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을 지를 결정할 수 있다. 포지션 종류에는 static, relative, absolute, fixed, sticky 5개가 있다.

static(기본 값)

ㆍ static은 element가 html에서 일반적인 흐름을 따라 배치된다. element에 position을 지정하지 않았을 때 기본으로 적용되는 값이다. static의 경우 top, right, bottom, left 속성들을 사용해도 적용되지않는다.

relative

ㆍ relative도 마찬가지로 일반적인 흐름에 따라 배치되지만 top, right, bottom, left 속성들을 이용해 기본값의 위치를 기준으로 위치 조절을 할 수 있다.(주로 부모 요소)

ㆍ 자신이 배치되어있던 위치에서 top: 150px; left:150px; 만큼 위치가 조절되는 것을 볼 수 있다. position도 relative임을 확인할 수 있다.

absolute

ㆍ absolute는 element가 문서의 일반적인 흐름을 따르지 않고 가장 가까운 위치에 있는 부모 element를 기준으로 위치가 움직인다. 부모 element가 없으면 문서 본문(body)을 기준으로 삼고 페이지 스크롤에 따라 움직인다.

ㆍ a는 relative position이므로 기본값에서 top:200px; 떨어진 위치에 위치한 것을 볼 수 있고 b는 static position이므로 일반적 흐름에따라 배치되었고 c는 absolute position이므로 relative position을 가지고 있는 가장 가까운 부모인 a를 기준으로 top:200px; 떨어진 곳에 위치한 것을 볼 수 있다.

fixed

ㆍ fixed는 viewport를 기준으로 한 위치에 고정된다. 스크롤되어도 움직이지 않는 고정된 자리를 갖는다. 부모 요소와 관계없이 브라우저의 viewport를 기준으로 top, bottom, left, right을 사용하여 위치를 이동시킨다.

느낀점

ㆍ 위코드 첫 주에 position에 관한 과제가 나왔는데 많이 해맸다. 전에는 주로 flex나 grid를 사용했었고 fixed는 이전에 클론코딩으로 배울때에 많이 사용해봐서 그나마 익숙했지만 relative와 absolute는 사용 빈도가 상대적으로 적은 이유도있다. css는 공부할때마다 정리가 잘 안되는 느낌이다.