[position값]
-
static⇒ 기본값, 기본적인 배열 순서를 따름
relative- static에 left, right, top, bottom 속성을 부여할 수 있음
absolute- 조상(부모) 요소 중 기준(컨테이너)을 찾을 때까지 타고타고 올라가서 찾는다
- 기준 조상 요소가 되는 방법 ⇒ position 속성 값 주기 ( 아무것도 안주면(
static) x) - 찾으면 해당 조상 요소를 기준으로 자리를 잡고, 없으면 뷰포트가 컨테이너가 된다
- 강제적으로 display: block이 된다
fixed- 부모랑 상관 없이 viewport를 기준으로 자리를 잡음 ⇒ 스크롤을 내려도 화면에 계속 보임
- but. 조상 요소 중에
transform,perspective,filter속성을 가지고 있는 요소가 있다면, 뷰포트가 아닌 해당 요소를 기준으로 자리 잡음 - 강제적으로 display: block이 된다
- 쌓임 맥락 ⇒ z축 실현 !!
- 문서의 루트 요소
- postion이
absolute/relative이고 z-index가 auto 외의 값일 때 - postion이
fixed/sticky일 때 - flex, grid 컨테이너 자식 중 z-index가 auto가 아닌 요소
- z-index는 위의 두 경우에만 쓸 수 있음
- opacitiy가 1(=100%)보다 작을 때
[허용되는 요소 list]
등등