[css] position - relative, absolute, fixed

1일차 첫블로그 ㅎ

position의 속성

1. relative

relative를 사용하면서 가장 비슷하게 들었던 생각은 기준점이라는 것이다. 요소를 자기 자신 기준으로 잡을 수 있으며 본인이 기준이 되었다면 absolute로 움직일 수 있다. 쉽게 생각하면 absolute가 돌아다닐 수 있는 영역을 relative가 제어할 수 있게 해준다는 표현이 좀 더 쉽게 다가갈 것 같다.

코드를 작성하다보면 relative와 absolute가 꽤 많이 쓰이는데 (남발x) 이때 좀 조심해야할 것 같다.

2. absolute

absolute는 위에 설명했던 relative를 기준으로 top,left,left,right를 자유롭게 돌아다닐수 있으며 relative의 너비와 높이 안에서 한정된다. 자식의 개념으로 이해하면 쉽다. 만약 relative의 영역 밖으로 보내려면 -를 사용해서 본래의 위치보다 더 밖으로 뺄 수 있다는 장점이 있다.
하지만 absolute를 많이 사용하게 된다면 웹 페이지 안에서 layer(층)가 쌓이게 되고 탄탄하지 않은 불안정한 페이지가 될 것이다. 남발은 자제하자.

3. fixed

예를 들어 아래와 같은 코드가 있다고 가정해보자.

.fixed {
	top:0;
  	left:0;
}

fixed는 브라우저의 상대적 위치이다. 따라서 화면이 바뀌어도 그 위치에 고정을 시킬 수 있는 기능이다. .fixed 클래스를 가진 태그의 위치는 상단 맨 위와 좌측에 붙어있는 레이아웃을 볼 수 있다. relative의 영향을 받지 않고 단독적으로 움직일 수 있는게 fixed이다. 화면 어딘가에 고정시킬 때 가장 유용하며 가장 좋은 예를 들자면 쇼핑몰이나 커머스 관련 홈페이지를 보면 많이 있는 따라다니는장바구니, 필터, 상단의 메뉴 모음이 있다.