✔︎ position 속성
웹 문서 안의 요소를 원하는 위치에 배치할 때 사용하는 속성 중 하나.
position속성 중
static을 제외한 나머지 속성 값에서는 좌표를 이용해 각 요소의 위치를 조절 할 수 있다.
위치는 속성 top, bottom, left, right를 사용하여 원하는 px 또는 %등으로 조정한다.
▪️
top: 위쪽에서 얼마나 떨어져 있는지⬆️,
▪️bottom: 아래에서 얼마나 떨어져 있는지⬇️,
▪️right: 오른쪽에서 얼마나 떨어져 있는지➡️,
▪️left: 왼쪽에서 얼마나 떨어져 있는지⬅️를 나타낸다.
📍
static: 요소를 문서의 흐름에 맞추어 배치한다.(기본값)▪️ 속성 top, bottom, left, right을 사용할 수 없고,
float속성을 사용하여 좌우 배치가 가능하다.📍
relative: 나열된 순서대로 배치되는 것은 static과 유사하지만속성 top, bottom, left, right 사용이 가능하다.▪️ 주로 부모 요소로 지정되는 속성
📍
absolute: 문서의 흐름과 상관없이 위치 좌표를 지정해 원하는 곳에 요소를 배치할 수 있다.▪️ absolute 속성 사용 시, 반드시 부모 요소가 relative로 지정되어 있어야 한다.
📍
fixed: 문서의 흐름과 상관없이 위치 좌표를 지정할 수 있지만 부모요소 기준이 아닌 윈도우 창을 기준으로 위치가 결정된다.▪️ 한 번 배치되면 fixed 속성값 이름처럼 브라우저 창을 스크롤하더라도 움직이지 않고 고정되어 표시된다.
✔︎ Essential tip - position으로 원하는 요소를 중앙에 위치시킬때, 요소의 크기만큼 margin-left : -"해당요소 width의 1/2의 값"을 지정해 확실히 맞추기.
