Position
CSS position 속성은 문서상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.
1) Static
- 요소를 일반적인 문서 흐름에 따라 배치한다.
- top, right, bottom, left 속성이 아무런 영향을 주지 않는다.
- CSS의 default 값이다.
2) Relative
- 자기 자신을 기준(원래 있어야 하는 자리에서 상대적으로)으로 top, right, bottom, left 속성값에 따라 위치를 지정한다.
- 일반적인 문서의 흐름에 따라 배치된다.
3) Absolute
-
position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있다.
-
내 아이템이 담겨있는 컨테이닝 블록을 기준으로 움직인다.(부모 위치에서 옮겨감)
-
일반적인 문서 흐름에서 제거된다.
-
페이지 레이아웃에 공간도 배정하지 않는다.
-
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.
-
일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 된다.
-
absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 된다.(아래의 경우는 너비값을 주었기 때문에 크기가 그대로이다!)
4) Fixed
- 컨테이닝 블록에서 완전히 벗어나서 뷰포트의 초기 컨테이닝 블록을 기준으로 옮겨간다.
- 일반적인 문서의 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
5) Sticky
- sticky 속성을 적용한 박스는 평소 문서 안에서
position: static과 같이 일반적인 흐름에 따르지만, 스크롤이 임계점에 이르면position: fixed와 같이 화면에 박스를 고정할 수 있는 속성이다. - sticky 속성은 top, right, bottom, left 속성값이 필수적이다.
- fixed 속성은 뷰포트에 고정하지만, sticky 속성은 scroll 박스에 고정한다. 즉, scroll박스가 오프셋 기준이다.
- sticky 박스의 부모 박스가 scroll 박스를 벗어나면 sticky 박스는 다시 일반적인 흐름에 따른다.
