나에게 relative , absolute란?
![](https://velog.velcdn.com/images%2Fny_plus_ny%2Fpost%2F731858bb-2e12-41df-ae66-00fb81a993ab%2Fimage.png)
Position
Position 프로퍼티에는 다양한 값을 설정할 수 있으며, 이를 사용하여 복잡한 레이아웃을 만들 수 있다.
- static
- relative
- fixed
- absolute
Position 프로퍼티의 값
static
: 기본값으로 위치가 지정되지 않은 상태
: 사전적 정의로는 정적인이지만 실제로는 위치값이 설정되어있지 않음을 의미
relative
: relative는 별도의 프로퍼티와 함께 지정해주어야함.
→ top, right, bottom, left
: 별도의 프로퍼티 없이 relative 값만 지정해준다면 static과 동일하게 아무 위치도 지정되지 않음
fixed
: 별도의 프로퍼티와 함께 지정해주어야함.
→ top, right, bottom, left
: fixed의 경우, 페이지 스크롤을 하여도 변동 없이 같은 곳에 위치함
= **뷰포트에 상대적으로 위치**
absolute
: 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정됨.
→ 기준으로 삼는 조상 엘리먼트가 없으면 document body를 기준으로 함
참고:
(https://ko.learnlayout.com/)
(https://poiemaweb.com/css3-layout)