position 속성
position 속성은 웹문서 안 요소들을 어떻게 배치할 지를 정하는 속성이다. position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을 지를 결정할 수 있다! 중요한 점은 position 속성은 상속되지 않는다.
position 사용법
position속성에는 static relative absolute fixed sticky가 있다.
static을 제외한 나머지 속성 값들은 top, left, bottom, right과 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있는데, 각 값들은 그 방향에서 얼마만큼 떨어져서 위치시킬 것인지를 나타낸다. (ex. top:15px;이면 상단에서 15px 떨어져 있는 곳에 위치시킨다는 뜻.)
자세하게 알아보도록 하자.
position: static
먼저, static은 position 속성의 기본 값이다. static 은 top, left, bottom, right 값이 아무런 영향을 주지 않는다. 그리고 명시적으로 position: static;으로 나타내지 않아도 브라우저에서 자연스럽게 요소들의 위치를 문서의 흐름에 따라 배치한다.
position: relative
요소를 일반적인 문서 흐름 즉, static일 때 배치되는 위치를 기준으로 top, left, bottom, right 속성 값에 따라 상대적 위치를 지정할 수 있는 속성 값이다.
position: absolute
요소를 일반적인 문서의 흐름과 상관없이 top, left, bottom, right 속성 값을 이용하여 요소를 위치시키는 속성 값이다. 이때, ㄱㅣ준이 되는 위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative인 요소다.
position: fixed
박스에서 벗어나, 브라우저를 기준으로 위치 변경이 일어난다. 이 속성값 역시 top, left, bottom, right 속성 값을 지정하여 위치를 변경한다.
먼저 선언한 HTML 요소를 fixed 를 이용하여 위치 값을 지정했을 때, 스크롤을 내리면 나중에 선언된 요소들에게 가려져 보이지 않게 될 수 있는데, 이 때는 z-index 를 활용해서 화면 위로 나오게 할 수 있다.
position : sticky
fixed 가 브라우저를 기준으로 위치 변경이 일어난다면, sticky 는 부모 요소 안에서의 현재 자신의 위치에 고정된다. 따라서 위치 값을 명시적으로 지정해줘야만 한다. 즉, position : sticky 만 쓰면 아무런 변화가 일어나지 않고, top, left, bottom, right 값을 지정해야 한다.
기준점 이상을 넘지 않을 때는 relative 포지션처럼 동작하다 그 이상을 넘게 되면 fixed 속성처럼 동작하게된다. 그러다가 scroll 박스 밖으로 벗어나게 되면 그 위치에서 정지하게 된다.
scroll 박스는 overflow 속성이 존재하는 부모요소를 뜻한다. 여기서 부모요소가 overflow를 특별히 명시하지 않았다면 부모요소가 바로 scroll 박스가 된다!
만일, scroll 박스 사이에 overflow: hidden 이 적용되어있는 요소가 있을 경우에는 sticky 속성이 제대로 동작하지 않으므로 주의해야 한다.
