[CSS] display, position 확실하게 알고가기

display

display : block;
display : inline;
display : inline-block;
display : flex;

block	inline	inline-block
div	span	div(+span)
꽉차게 들어가는 상자	물건	상자
한 줄에 하나씩	한 줄에 전부	상자지만 한 줄에 여러 상자를 놓을 수 있음
width, height을 지정 가능	content 자체만 꾸며줌 (width, height를 무시함)	width, height을 지정 가능

 

position

	기준
static	기본값	top, left 등을 사용해도 아무런 영향을 미치지 않는다
relative	아이템의 위치 값	그 자리에서 상대적으로 지정한 만큼 이동된다
absolute	아이템이 담겨있는 box	static이 없는 부모의 값을 따른다 (원하는 부모의 position값을 relative로 변경해야 한다)
fixed	아이템이 담겨있는 box	position이 위치해있는 값을 지정해줘야 작동된다
sticky	scroll해도 고정	기존의 문서에서 나와 상대적으로 뷰포트에서 포지션에 결정된다

작업하면서 특히나 absolute를 많이 사용하게 되는데 기준이 되는 부모의 position값을 relative로 주는 것이 매우 중요하다

그렇지 않으면 원하지 않는 곳으로 가있는 경우가 종종 있다...