position
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.
속성 종류
- statc
- relative
- absolute
- fixed
- sticky
1. position: static
기본값
top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다.
2. position: relative
요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다.
즉, 원래의 위치 에서 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있습니다.
3. position: absolute
DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데요. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 요소가 배치 기준이 됩니다.
ex)
<div> //position: relative인 경우
<div> absolute자리 </div>
</div>
안쪽 div의 css값
div{
position: absolute;
bottom: 0;
left: 50px;
}바깥 div의 position이 위와 같이 static이 아닌 경우, 바깥 div를 기준으로 안쪽 div가 위치 속성을 갖게 된다.
=> 바깥 div의 바닥에서 0px, 왼쪽에서 50px에 안쪽 div가 위치하게 된다.
4. position: fixed
페이지를 스크롤 하더라도 화면 한 부분에 고정되어 움직이지 않는 ui
fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문인데요. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정합니다.
5. position: sticky
페이지 스크롤링시 나타남.
sticky로 지정한 요소보다 스크롤이 내려가게 되는 경우, 지정한 위치에 붙어있게 된다.
출처에서 예시 이미지를 보는 것이 이해가 빠를듯
