display, position 완벽정복

1. position

CSS에서 position 속성은 문서에서 요소를 배치하는 방법을 지정할때 사용된다.
top - right - bottom - left 순서로, 이 4가지 속성으로 요소를 배치한다.

position: static
position: relative
position: absolute
position: fixed
position: sticky
...

• position: static
  기본값이다. 아무런 영향을 주지 않는다.
• position: relative
  기본값을 기준으로 top, right, left, bottom에 의해 요소가 변경된다.
• position: absolute
  relative 값을 가진 부모요소에 의해서 위치가 변경된다.
• position: fixed
  고정된 위치에 배치할 때 사용한다. 페이지가 스크롤 되어도 요소의 위치는 같은 위치에 고정되어 있다.
• position: sticky
  fixed와 동일하다. 그러나 sticky는 사용자의 스크롤에 따라 요소가 변경된다.

2. display

display 는 요소를 inline과 block 요소 중 어느 쪽으로 처리할지를 결정한다.

모든 HTML 요소는 하나의 display 값을 갖는다.
(대부분 inline 또는 block이다.)

* inline

• display 속성값이 inline인 요소는 새로운 라인(line)에서 시작하지 않는다.
• 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.
• 대표적인 인라인 요소로 span, a, img 등이 있다.

* block

• display 속성값이 block인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다.
• 대표적인 블록 요소로 div, p, ul, form, h1 등이 있다.

display: none
display: inline
display: inline-block
display: block

• display: none
  요소를 보이지 않게 한다.

• display: inline
  요소의 전후 줄바꿈이 없어 한 줄에 다른 요소와 함께 나란히 배치할 때 사용한다. ex) span,a,img

• display: block

  • 다른 요소를 다른 줄로 밀어내고 요소 하나가 전체 한 줄을 차지한다. ex) div, p, h1
  • block 요소는 inline 요소와 달리 width, height, margin, padding이 모두 적용 된다.

• display: inline-block

  • inline 요소처럼 전후 줄바꿈이 없이 한 줄에 다른 요소들과 나란히 배치되지만, block 요소들처럼 width,height,margin,padding 값들이 적용된다.
  • 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

MDN 에서 display 더보기