[CSS] Position

hi·2022년 2월 9일
0

: 요소의 배치 방법을 지정

position : static | relative | absolute | fixed

  • static을 제외한 나머지 속성 값은 좌표를 이용해 각 요소의 위치를 조절 ( top , bottom , left , right )

1. static

  • 문서의 흐름대로 배치 (기본값)
  • top , bottom , left , right 속성 사용 불가
  • float 속성을 이용해 좌우로 배치 가능

2. relative

  • 문서의 흐름 따라 위치 지정
  • static처럼 나열한 순서대로 배치되나 top , bottom . . . 속성 사용 가능

3. absolute

  • 문서의 흐름과 상관없이 원하는 위치에 배치 가능
    이때 반드시 부모 요소는 position이 relative로 지정되어 있어야 한다
    👉 즉, 배치할 요소를 감싸는 <div> 를 만들고 position을 relative로 지정해놓고 사용

4. fixed

  • absolute처럼 문서의 흐름과 상관없이 원하는 위치에 배치
    단, 부모 요소가 아닌 브라우저 창이 기준이 됨
  • 배치되면 브라우저 창을 스크롤해도 계속 고정되어 표시

0개의 댓글