CSS position & inline, inline-block, block

position

position속성은 HTML문서상에서 요소가 배치되는 방식을 결정한다. 요소의 정확한 위치선정을 위해 top, right, bottom, left속성이 주로 같이 사용된다.

• position:relative

  
  position:relative는 요소를 원래위치 기준으로 상대적(relative)으로 배치할 수 있게 한다. 요소의 위치지정은 top, right, bottom, left속성을 통해 원래위치로부터 얼마나 떨어지게 할 수 있는지 정할 수 있다.

• position:absolute

  이름처럼 절대적인 위치에 요소를 둘 수가 있는데
  relative가 static인 원래위치 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position:static을 가지고있지않은 부모요소를 기준으로 움직인다. 만약 부모요소 중 relative, absolute, fixed태그가 없으면 맨 위의 태그가 부모요소로 사용된다. 일반적으로 어떤 요소의 속성값을 absolute로 설정하면 부모요소의 속성값이 relative로 지정해주는 것이 관례이다.

• position:fixed

  position속성을 fixed로 지정하면 요소를 항상 고정된 위치에 둘 수가 있다. 화면을 위아래로 스크롤하면서 움직여도 특정부분에 고정되어 움직이지 않는 UI가 있다면 바로 position:fixed를 사용해 고정시킨 것이다.

inline vs block vs inline-block

• inline

  주로 텍스트를 주입할 때 사용되는 형태로 width값이 100%rk 아닌 컨텐츠영역만큼 차지하게 되며 라인이 새로 추가되지 않는다. 높이 또한 폰트의 크기만큼 차지한다.
  
  (1) width와 height를 명시할 수 없다.
  (2) margin은 위아래에 적용되지 않는다.
  (3) padding의 좌우는 시각,공간적인 부분이 모두 적용되지만 위아래는     시각적인 부분만 적용된다.

• block

  한 영역을 차지하는 박스형태의 성질이다. 기본적으로 width의 값이 100%이며 라인이 새로 추가될 수 있다.
  margin, padding, width, height 모두 지정이 가능하다.
  
  

• inline-block

  inline의 특징과 block의 특징을 모두 가진 요소이다.
  특징은 다음과 같다.
  
  (1) 줄바꿈이 이루어지지 않는다.
  (2) width와 height를 지정할 수 있다.
  (3) width랑 height를 지정하지 않을시 inline만큼
      컨텐츠영역이 잡힌다.