♣ position을 어떻게 사용하는지 알려주세요
CSS의 속성중 하나로 웹 문서 안 요소들을 어떻게 배치할지를 지정하는 속성입니다.
position 속성을 이용하면 텍스트나 이미지같은 요소들을 원하는 곳에 위치시킬 수 있습니다.
position은 static, relative, fixed, absolute, sticky 5가지가 있습니다.
- static : position속성의 기본 값으로 다른 요소와의 관계에 의해 자동으로 배치되고 top, right, bottom, left, z-index와 같은 속성에 영향을 받지 않습니다.
- relative : 원래 있던 위치(position : static(default) 이었을 때)를 기준으로 top, right, bottom, left와 같은 속성에 의한 상대적인(relative) 위치에 배치됩니다.
- absolute : 원래 위치와 상관 없이 position: static 속성을 가지고 있지 않은 조상을 기준으로 left, right, top, bottom 속성값을 이용하여 위치를 지정해 줄 수 있습니다. 만약 조상들의 포지션이 모두 static 속성을 가지고 있다면 가장 위의 태그(body)가 기준이 됩니다.
- fixed : absolute속성과 비슷하게 문서의 흐름과 상관없이 위치를 좌표로 결정합니다. 하지만 absolute와 다르게 스크린의 뷰포트(웹페이지가 사용자에게 보여지는 영역, 브라우저 창)를 기준으로 한 위치에 배치되어 스크롤되어도 움직이지 않는 고정된 자리를 갖게 됩니다.(기준점: 브라우저 왼쪽 위 꼭지점)
- sticky : sticky는 기준점을 이상을 넘지 않을 때는 relative처럼 동작하다가 특정 기준점을 벗어나면 fixed처럼 동작합니다. 그러다 스크롤이 scroll 박스 밖으로 벗어나게 될 경우에는 그 위치에서 멈추게 됩니다. 일반적인 상황에서 sticky속성의 기준점은 부모요소가 됩니다.
댓글