position 속성 - relative, absolute, fixed

레이아웃을 할 때,

flex 나 박스 안쪽에서 margin, padding 등으로 위치를 조정하는 방법이 있지만, 가끔은 그것만으로 해결이 안될 때가 있다. 마치 지도에 좌표를 찍듯이 어떤 숫자로 위치를 지정할 수는 없을까?

그럴때 사용하는 것이 position 속성인 것 같다.
position 속성은, relative는 요소자기 자신을 기준으로,
absolute는 부모박스를 기준으로 위치를 정할 수 있으며
top right bottom left의 값을 주어서 위치를 지정할 수 있다.

fixed는 내가 보이는 뷰포트에 해당 요소를 고정시킬 수가 있는데,
쇼핑몰 웹페이지에서 해당 상품의 스크롤을 아무리 내려도, 구매버튼이 계속 따라오는 것과 같은 효과이다.