[220407]Position

position

: 요소의 위치 지정 기준

 

static (기본값)

기준 없음

 

relative

요소 자신이 기준

 

absolute

위치 상 부모 요소가 기준 (positon 속성을 가지고 있는)

- absolute가 지정된 요소는 display 속성이 block으로 변경된다.

- Trandform perspective filter 속성이 하나라도 none이 아니라면 뷰포트 대신 그 조상을 기준으로 한다.

뜨는 이유는 부모요소가 기준이 되면서 주변요소와 상호작용 할 필요가 없어지기 때문!

 

 

fixed

뷰포트가 기준

- fixed가 지정된 요소는 display 속성이 block으로 변경된다.

- Trandform perspective filter 속성이 하나라도 none이 아니라면 뷰포트 대신 그 조상을 기준으로 한다.

 

sticky

스크롤 영역이 기준

- 가장 가까운 조상 스크롤 박스에 달라붙음(항상 뷰포트인건 아님! Overflow 등으로 스크롤박스생성 가능)

- 가장 가까운 조상 블록요소 범위 안에서만 움직임

 

z-index

: 요소의 쌓임 정도를 지정 

- 숫자가 클수록 위에 쌓임

 

요소 쌓임 순서 

: 어떤 요소가 더 위에 쌓일지 결정

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임 (static 제외)

2. z-index 속성의 숫자 값이 높을 수록 위에 쌓임

3. HTML의 다음 구조일 수록 위에 쌓임

 

 

출처 : (KDT FE2) 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. 박영웅 강사님