TIL 02 - CSS Position

lazy corder·2022년 3월 30일
0

CSS

목록 보기
1/1

나에게 relative , absolute란?

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)

0개의 댓글