1. position

relative

• 별도의 프로퍼티를 지정하지 않는 position:relative;는 특별한 의미가 없다.
• 원래 자기 자신의 위치를 기준으로 좌표를 지정하기 때문에 top, right, bottom, left의 위치를 이동시키는 프로퍼티가 있어야 한다.
• 형제, 부모의 객체 영향을 받기 때문에 배치에는 적절하지 않을 수 있다.

absolut

• position: absolute;은 절대적인 위치에 둘 수 있다.
  (부모 엘리먼트에 상대적으로 위치 지정, HTML구조의 부모가 아님)
• 기준으로 삼는 조상 엘리먼트가 없으면 본문을 기준 / 페이지 스크롤에 따라 움직인다.
• 부모 중 position이 relative, fixed, absolut 하나라도 있으면 그 부모에 대해 절대적으로 움직인다.
  (static은 위치상의 기준을 설정하지 않는 개념, 기본값이기 때문에 사용할 수 없다)
• 움직이고 싶은 부모에게 position: relative; 부여한다.
  (부모 요소 외에 영향을 받지 않는다, 배치에 가장 적합한 속성)

fixed

• 위치가 고정 되어 있다.
• 눈에 보이는 브라우저 화면 크기 만큼, 화면 내에서만 움직인다.

2. block, inline, inline-block

block

• header, footer, p, li, table, div, h1 태그 등
• block 요소 옆에 다른 요소를 붙일 수 없고, 새 줄에서 시작하여 좌우로 최대한 늘어 난다.
• inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영된다.

inline

• span, img, a 태그
• 줄바꿈 없이 순서대로 한 줄에 보인다.
• 텍스트, 이미지 영역만 차지하기 때문에 whidth, height속성을 지정해도 무시된다.
• margin과 padding 속성은 좌우 간격만 반영된다.

inline-block

• inline 요소 처럼 줄 바꿈 없이 다른 요소와 나란히 배치
• inline 요소에서 불가능했던 width, height, margin, padding 속성의 지정이 가능하다.
• inline-block을 사용 하려면 display: inline-block을 지정 해줘야 한다.

3. float

• 웹페이지에서 이미지와 텍스트를 함께 배치, 레이아웃을 할 때 사용
• float: left의 형태로 사용
• inherit: 부모 요소에서 상속 / left: 왼쪽에 부유하는 블록 박스 생성. 페이지 내용은 박스 오른쪽에 위치 / right: 오른쪽에 부유하는 블록박스 생성. 페이지 내용은 박스 왼쪽에 위치. / none: 요소를 부유시키지 않는다.