position / inline, block에 대하여

CSS에서 사용하는 position

relative: 요소 자기 자신의 원래 위치를 기준으로 배치한다.

absolute: 가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다. 만약 조상 중 position이 없다면 body를 기준으로 삼는다.

fixed: 뷰포트 기준으로 배치한다.

inline , block , inline-block

inline : 컨텐츠 너비 만큼 차지, 높이와 너비 설정 불가능, 예시로는 span, a 등이 있다. 줄바꿈 X

block: 사용 가능한 전체 너비를 차지, 높이와 너비 설정 가능, 예시로는 div, p , h1 , ul ,ol 등이 있다. 줄바꿈 O

inline-block: 줄 바꿈 없이 한 줄에 다른 요소들과 배치 가능, width, height, margin 설정 가능