position

static, absolute, relative

• position: static

  • 기본값
  • html에 정의된 순서대로 보여줌

• position: absolute

  • 아이템과 가장 가까이에 있는 부모 중에 기본값이 static이 아닌 부모를 기준으로 이동
  • 주변에 함께 있던 아이템들의 재배치가 일어남

• position: relative

  • 원래 있던 자리에서 top, left, bottom, right 항목에 설정한 자리로 이동하는 것을 허용

  .contact-btn a {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  position: relative;
  }

  • top: 버튼을 클릭할 시 위로 지정한 픽셀만큼 이동

  .contact-btn a:active {
  top: 2px;
  }

fixed, sticky

• position: fixed

  • class에서 벗어나 웹 페이지 안에서 움직임
  • 부모와 상관없이 viewport를 기준으로 포지션 변경이 일어남

• position: sticky

  • scroll이 되어도 원래 있던 자리에 고정
  • 부모 box 안에서의 position이 지정되어 있어야 함

Source

• 스튜디오 마르 css 세션
• 드림코딩 by 엘리
• codeacademy
• MDN position