1. display

  CSS의 display 속성은 해당되는 요소를 화면에 어떻게 보여줄 지를 정하는 속성이다.

display 속성을 해당되는 요소를 어떤 박스 안에 넣을 것인가라고 이해했다.

  대부분의 태그들이 <div>태그와 <span>태그처럼 기본적으로 display 값이 정해져있다. 그러나 CSS로 display 속성을 정해줄 수 있기 때문에 display 속성을 지정하는 순간 기본 display 속성은 아무것도 아니게 된다.

1.1 inline

  요소 즉, 콘텐츠 자체가 박스가 된다. 사실 자기 구실 제대로 못하는 박스라고 이해했다. 박스면 박스답게 단단하게 자기 위치 잘 지켜야 되는데 display: inline 은 바로 옆에 다른 inline 박스가 올 수 있다.

1.2 inline-block

  block 박스이기는 하지만 inline 성격을 띄는 박스라고 이해했다. inline의 성격을 띄기 때문에 같은 줄에 여러 개의 inline-block 박스들을 위치할 수 있다. 하지만 근.본.은 block 박스이기 때문에 콘텐츠를 감싸는 박스가 자기 구실을 잘 하고 있고 width, align 등 block 박스 안에서 사용하던 속성들을 적용할 수 있다.

1.3 block

  아주 자기 구실 제대로 하는 박스라고 이해했다. 기본적으로 width 값이 해당 요소를 감싸는 컨테이너의 100%가 된다. display: block 에서 width는 화면 전체이다. 자기 구실 제대로 하는 박스이기 때문에, width가 화면 전체이기 때문에 같은 line에 다른 박스가 올 수 없다.

2. position

  position이라는 이름처럼 태그들, 콘텐츠들의 위치를 지정하는 속성이다. 속성값으로 top, right, bottom, left 등의 값을 지정할 수 있는데 이때 속성값을 어떤 위치를 기준으로 주게 될 것인지를 결정하는 속성이다. position의 기본값은 static으로 position: static;은 position이 지정되지 않았다고 본다. static 외에 relative, absolute, fixed 등일때만 position이 지정되었다고 본다.
  태그의 위치를 지정하기 위해선 무엇을 기준으로 위치를 지정할 지가 중요한데 position 속성은 이 때 기준을 무엇으로 잡게 될 것인지를 정하는 속성으로 이해했다.

2.1 relative

  position: relative;는 태그 자신의 원래 위치를 기준으로 잡는 position 속성값으로 이해했다. position이 주어지지 않았을 때 해당 태그가 위치하는 위치가 position이 주어졌을 때 움직임이 들어갈 기준이 되는 것이다.

2.2 absolute

   position: absolute는 relative와는 달리 해당 태그의 가장 가까운 부모요소를 움직임이 들어갈 기준으로 잡는다고 이해했다. 이때 부모요소가 position이 지정되어 있어야 한다. 그렇기 때문에 정확하게 말하자면 position의 속성값이 static이 아닌 가장 가까운 부모 요소를 기준으로 위치가 변경된다고 할 수 있다.
만약 position의 값이 absolute로 지정된 태그의 부모요소 가운데 position의 값이 지정된 부모요소가 없다면 계속 올라가 body 태그가 가장 가까운 부모요소로 지정되게 된다.

2.3 fixed

   position: fixed는 원래 태그의 위치와 상관없이 fixed 속성값으로 위치를 지정할 수 있다. 상위 요소에 상속받는 영향이 없기 때문에 화면이 스크롤되어도 계속해서 화면에 지정된 위치에 나타난다. 그렇게 때문에 스크롤되어도 유저에게 계속해서 유용한 header나 nav 등에 자주 사용된다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

참고 링크
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1