position 레이아웃

Position

요소를 자유자재로 움직이거나, 위에 덧댈 수 있기 때문에 position을 쓴다.

static(초깃값), relative, absolute, fixed, sticky로 총 5개로 요소의 상태를 바꿀 수 있다.

static

static은 요소의 위치를 정해줘도(left,right,top,bottom) 본인 자리에서 움직이지 않는다.

relative

relative는 본인 자리의 왼쪽 위를 기준점으로 해서 위치를 정해줄 수 있다. 다른 요소들은 영향받지 않는다.

absolute

absolute는 브라우저의 왼쪽 위를 기준점으로 해서 위치를 정해준다. 보통은 부모를 relative로 둬서 기준점을 부모요소의 왼위로 두고 쓴다. 다른 요소들은 그 자리를 차지하고, 자기자신은 블록박스의 성질인 가로를 최대로하는 성질은 잃는다.

fixed

스크롤을 움직여도 요소가 그 자리에 고정된다.

absolute와 마찬가지로, 기준점은 브라우저의 왼위이고 가로 최대 성질을 잃는다. (width:100%을 지정해서 되돌릴 수도 있다.)

앞뒤 순서를 정해줄 때, z-index

z축이라고 생각하면 쉽다.

값에는 정수가 들어가고, 숫자가 클 수록 앞에 배치된다.