Position - relative, absolute, fixed

개요

• position은 레이아웃, 객체의 위치를 조정할 때 쓰는 css 속성이다
• position 속성의 값인 relative, absolute, fixed에 대해 알아보자

0. static

기본값

• css 명시: position: static;

1. relative

static에 대한 상대적 위치를 계산하는 속성

• css 명시:
  • position: relative;만 했을 경우 static과 동일한 동작
  • top, right, bottom, left 프로퍼티로 지정

2. absolute

position: relative;로 지정된 가장 가까운 상위 요소를 기준으로 위치를 계산하는 속성

• css 명시:
  • position: absolute;
  • top, right, bottom, left 프로퍼티로 지정

3. fixed

static, 상위 요소와 상관없이 브라우저 화면의 상대적 위치를 기준으로 위치를 계산하는 속성

• 페이지를 스크롤하더라도 늘 같은 곳에 있도록 위치시킴
• css 명시:
  • position: fixed;
  • top, right, bottom, left 프로퍼티로 지정

참조, 출처
https://ko.learnlayout.com/position.html
https://poiemaweb.com/css3-layout
https://poiemaweb.com/css3-box-model