display | position 차이

display : block - 한줄에 하나만 가능

display : inline-block - 한줄에 여러개 가능 

 

display:block 이미지 3개 / display:inline-block 이미지 3개

display:block은 red / display:inline-block은 black

 

red : block / black : inline-block

position 

static - 기본값, 위치 이동 불가(HTML 순서에 의해서 위치 선정)

relative - 원래 위치에서 top,left,right,bottom속성으로 위치 이동 가능

top / left 20px 값에 의해서 box 이동함.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

absolute - 요소가 속해있는 바로 위의 상자를 기준으로 이동

top / left 20px 값에 의해서 box 이동함.