css 에서는 position 을 사용해서 요소들을 움직인다.
position 에는 총 4가지가 있다
: static, relative, absolute, fixed
1. static
- 기본 값이며, html 작성 순서대로 요소들을 보여준다.
2. relative
- 원래 있어야 하는 자리에서 설정하는 값만큼 움직이는 것.
- top, bottom, left, right 로 요소의 위치 이동이 가능하다.
3. absolute
- 가장 가까이에 위치한 부모를 기준으로 설정한 값만큼 움직인다.
- 부모가 없을 경우 문서 본문을 기준으로 움직인다.
- 기준으로 하고 싶은 부모 태그나 부모 클래스에 position: relative; 값을 부여한다.
- position: absolute; 를 설정하면 inline-element 처럼 내용 크기만큼 너비가 생긴다.
4. fixed
- 상속 관계와 상관없이 '페이지 상'에서 고정된다.
- 주로 nav 바나 footer 을 고정할 때 사용된다.
! position 이 absolute 이거나 fixed 이면 주변의 요소와 상관없이 위치하게 되므로, 다른 요소와 영역이 겹칠 수 있다. 이 때는 padding 이나 margin 으로 간격을 조절한다.