CSS 속성(Properties) - 배치

position

요소의 위치 지정 기준

 

📍 value

static [기본 값]

기준 없음

 

relative

요소 자신을 기준으로 배치

• 위치가 이동해도 위에서 부터 쌓이는 주변과의 상호작용이 무너지지 않음

 

absolute

위치 상 부모 요소를 기준으로 배치

• 위에서 부터 쌓이는 주변과의 상호작용이 무너지고 공중에 붕 뜸
• 상위 요소를 위치 상 부모 요소로 지정해줘야 함
  • 상위 요소에 position: relative; 와 같이 위치를 지정해줘야 함
  • 모든 상위 요소에 위치가 지정되어 있지 않다면 뷰포트가 위치 상 부모 요소
• display 속성이 block으로 변경됨
• 일반적으로는 가로 너비가 최대한으로 늘어나려고 시도하지만 absoulte는 최소한으로 줄어들려고 시도

 

fixed

뷰포트(브라우저)를 기준으로 배치

• 위에서 부터 쌓이는 주변과의 상호작용이 무너지고 공중에 붕 뜸
• 항상 고정
• display 속성이 block으로 변경됨
• 일반적으로는 가로 너비가 최대한으로 늘어나려고 시도하지만 fixed는 최소한으로 줄어들려고 시도

 

같이 사용하는 속성

• top/bottom/left/right: 요소의 각 방향별 거리 지정 속성
• z-index: 요소의 쌓임 정도를 지정
  • 값의 숫자가 높을 수록 위에 쌓임
  • positon: static;인 경우 동작 X
• 모두 양수, 음수 사용 가능

 

요소 쌓임 순서(Stack order)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본 값 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번과 2번 조건까지 같은 경우, HTML 작성이 나중에 된 아이템일수록 위에 쌓임

 

---

※ 패스트캠퍼스 FE 프로젝트십 과정 중 강의를 듣고 정리한 내용입니다.