position
문서 상에 html 요소를 배치하는 방법을 정의하고 top, bottom, right, left 가 최종 위치를 결정하는 방식으로 요소의 위치가 결정 됩니다. 여기서 top, bottom, right, left 의 값의 의미는 지정 위치에서 값 만큼 떨어져 있다는 뜻 입니다. 예를 들어
top : 100px; 이면 위에서부터 100px 떨어져 있으라는 뜻 입니다.
position 속성값을 알아 봅시다.
- static
static은 요소가 html 문서에서 일반적인 흐름에 따라 배치 합니다. position 속성 값의 기본값 입니다. top, right, bottom, left 속성이 적용되지 않는다. - relative
static과 동일하게 요소가 흐름에 따라 배치되게 됩니다. 차이점은 top, right, bottom, left와 같은 속성에 의한 상대적인 위치에 배치 할 수 있다는 점 입니다.
원래 아이템이 있어야 할 자리에서 상대적인 위치로 배치 됩니다.
예를 들어 left : 10px; 아이템이 원래 위치해야할 자리에서 왼쪽으로 10px 떨어져 아이템이 위치하게 됩니다. - absolute
요소가 문서의 일반적인 흐름에서 제거됩니다. postion 속성 값이 static 으로 정의되어 있지 않은 부모 요소 기준으로 위치가 지정되며 만약 부모(조상) 요소 중에 position 속성 값이 relative, absolute, fixed 값을 가지는 요소가 없다면 가장 상위 요소인 body 요소가 기준이 됩니다.
아이템이 담겨있는 상자 안에서 지정한 값에 따라서 아이템이 위치하게 됩니다. 기존의 아무 방향 값도 지정하지 않았다면 아이템이 담겨있는 해당 박스 안에서 제일 왼쪽 위에 위치 한다.
만약 left : 10px; 를 해당 아이템에 지정 했다면 아이템이 담겨있는 박스에서 제일 위에서 왼쪽으로 10px 떨어진 위치에 위치한다. - fixed : 요소가 문서의 일반적인 흐름에서 제거됩니다. top, bottom, left, right 로 지정 할 수 있으며 요소의 위치 기준은 브라우저 화면이다. 이렇게 요소의 위치를 지정하며 지정한 위치에 고정되며 스크롤 되어도 움직이지 않는 고정된 자리를 가지게 됩니다.
아이템이 담겨있는 상자 안에서 지정한 값에 따라서 아이템이 위치하게 됩니다. 기존의 아무 방향 값도 지정하지 않았다면 아이템이 담겨있는 해당 박스 안에서 제일 왼쪽 위에 위치 한다.
만약 left : 10px; 를 해당 아이템에 지정 했다면 아이템이 담겨있는 박스에서 제일 위에서 왼쪽으로 10px 떨어진 위치에 위치하면서 스크롤을 움직여도 그 자리에 고정 됩니다. - sticky : 요소가 html 문서안에서 static과 같이 일반적인 아이템이 위치해야 할 위치에 위치하다가 스크롤을 움직이다가 임계점에 이르면 fixed와 같이 박스를 화면에 고정할 수 있는 속성 입니다.
