[css] position 4가지 : static, relative, absolute, fixed

lilyoh·2020년 7월 20일
0
post-custom-banner

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 으로 간격을 조절한다.

post-custom-banner

0개의 댓글