position 속성 - static, relative, absolute, fixed, sticky

Nicholas·2022년 4월 26일
0

HTML, CSS

목록 보기
2/2

1. position 속성 이란?

  • 문서 상에 요소를 배치하는 방법을 지정할때 사용하는 속성
  • 위치결정은 top, right, bottom , left 속성으로 결정
  • 추가로 하나의 키워드값을 선택해 지정해줄수 있다.

2. position 속성의 5가지 키워드

2-1. static

  • 기본값
  • 위치결정 속성인 top, right, bottom , left 속성을 사용할 수 없다.

2-2. relative

  • 본인의 현재 위치를 기준으로 배치된다.
  • 배치이후 위치결정은 위치결정 속성인 top, right, bottom , left 속성 값에 따라 배치한다.
  • 배치유형 : 상대적 위치 지정

2-3. absolute

  • 가장 가까운 position:relative속성이 부여된 부모태그를 기준으로 배치한다.
  • 기준이 잡히면 그 기준에서 위치결정 속성인 top, right, bottom , left 속성 값에 따라 배치한다.
  • 태그의 크기는 안에 있는 내용(content)기준이 된다.
  • 항상 부모를 기준으로 배치한다.
  • 배치유형 : 절대적 위치 지정

2-4. fixed

  • 현재 보여지고 있는 화면(뷰포트)을 기준으로 배치한다.(스크롤을 무시한다.)
  • 그 위치는 위치결정 속성인 top, right, bottom , left 속성 값에 따라 배치한다.
  • 태그의 크기는 안에 있는 내용(content)기준이 된다.
  • 항상 보여주
  • 배치유형 : 절대적 위치지정

2-5. sticky

  • top, right, bottom, left 속성이 필수
  • 스크롤을 따라 움직임.
  • 부모태그박스의 범위내에서 스크롤을따라 움직임.(이동의 한계가 있음)

3. 배치 우선순위

profile
WEB Developer

0개의 댓글