static, relative, absolute, fixed, sticky
모든 요소의 기본 값은 static
relative : 집은 나갔지만 어디에 있는지 암(붕뜨지만 자기 자신을 기준으로 이동)
(원래위치를 기억함, 다른요소에 영향 안줌, float와 다름)
absolute 집나간 자식 (기준점 : position이 static이 아닌 부모에게 위치시킴(보통 relative로 )
: 붕뜨면서 display값이 block이 되며, 길막을 못함
(margin이 자동으로 생성 ❌, float와 동일), float다른점은 붕떠서 있음
position이 static(가까운 부모가)이 아닌 요소를 중심으로 위치시킴
fixed 집나간 자식 (기준점 : viewport 사이즈 기준(움직여도 viewport 고정))
: viewport(ex.브라우저 창의 북마크 바아래 전체크기)
: 붕뜨면서 display값이 block이 되며, 길막을 못함(absolute와 동일)
sticky 가장 가까운 부모에 고정됨 (fixed와 부모가 다름)
z-index
: z-index 속성이 적용되기 위해서는 z-index를 적용한 영역이 static값이 아니여야 한다.
: 붕뜨게 되면 z-index가 생김(z축)