개발새발/html, css

[CSS] position

몌으니 2024. 4. 7. 08:06

position이란?

HTML요소가 배치되는 방식을 결정하는 속성

positioxn의 속성 5가지

static(기본값), relative, absolute, fixed, sticky

top, left, right, bottom : 해당 방향 기준으로 요소의 좌표값을 변경

  1. position: static(기본값)
    요소를 문서상 원래 있어야 하는 위치에 배치한다.
    top, left, right, bottom 적용 불가

  2. position: relative
    원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다.
    top, left, right, bottom 적용 가능

  3. position: absolute
    절대 좌표를 기준으로 요소의 위치를 조정할 수 있다.
    top, left, right, bottom 적용 가능
    * 절대 좌표는 해당 요소의 relative가 적용된 부모요소의 좌표거나, 부모요소가 없다면 body태그의 좌표를 기준으로 생성됨
    • relative 적용된 부모 요소가 없을 경우
    • 부모요소에 relative가 있을경우
  1. position: fixed
    스크롤과 무관하게 뷰포트를 기준으로 요소의 위치를 설정할 수 있다.
    기준 : viewport

  2. position: sticky
    요소의 원래 위치에 있다가 스크롤이 내려가면 지정한 좌표에 고정된다.
    기준 : 부모 요소의 좌표

  3. z-index
    여러개의 요소가 겹쳐져 있을 때, 무엇이 앞으로 나올지 결정하는 속성
    auto(기본값), 숫자가 클 수록 앞으로 위치하게됨.