display

block

• 한줄을 모두 차지
• div의 디폴트값
• 컨텐츠의 사이즈에는 상관없이 지정한 box 사이즈를 따름

inline

• 공간이 있다면 하나의 라인에서 모두 표시됨
• span의 디폴트값
• 컨텐츠 자체를 꾸민다
  - width나 height를 설정해 놓더라도 컨텐츠 사이즈에 맞추기 때문에 영향을 받지 않는다.
  - 태그내 내용이 없으면 아무것도 보이지 않는다.

display

• display 설정으로 디폴트값인 inline, block 설정을 바꿀수 있다.
• inline-block : 컨텐츠의 사이즈에는 상관없이 지정한 box 사이즈를 따름. 공간이 있다면 하나의 라인에서 모두 표시됨

div{
background: red;
display: inline-block
}

Position

CSS에서 지정된 디폴트값은 position: static

1. position: static은 stml에 정의된 순서대로 브라우저상에 자연스럽게 보이는 것을 의미. 여기서 article의 위치는 body안에 담겨있기 때문에 left, top을 무시하고 페이지상에서 위에 붙어있게 된다.
   

2. position: relative 로 변경시 left, top이 적용된다.
   

3. box 또한 position: relative 로 변경시 left, top이 적용된다. 원래 있어야할 자리에서 상대적으로 설정 픽셀만큼 옮겨가는 것이다.
   

4. position: absolute
   아이템이 담겨있는 상자를 기준으로 설정 픽셀만큼 옮겨감
   여기서는 div가 article 안에 담겨있으므로 article을 기준으로 옮겨감
   

5. position: fixed
   상자안에서 완전히 벗어나 윈도우(웹페이지)를 기준으로 옮겨감
   

6. position: sticky
   기존 자리에 있으나 스크롤시 원래 있던 자리를 유지하고 붙어있는다.

can I use? 웹사이트

sticky 옵션 등을 특정 브라우저에서 사용할수 있는지 확인가능