Position

• position 속성을 사용하면 요소를 html과 상관없이 원하는 위치에 놓을 수 있습니다.

  postion의 종류
  position: static; //정적 위치
  position: relative; //상대적 위치
  //top, right, bottom, left 가 있을때 적용됨
  position: absolute; //절대적 위치
  position: fixed; //고정적 위치

Position - relative

• 상대적 위치로 이 자체만으로는 특별한 의미가 없습니다.
• top, right, bottom, left 속성이 있어야 이동이 가능합니다.

  .relative {
    position: relative;
  }
  .top-20 {
    top: -20px;
    left: 30px;
  }

• 마이너스 값이 있으면 오히러 위로 올라가게 됩니다.

Position - absolute

• 절대적 위치를 사용하면 절대적인 위치로 사용 수 있습니다.
• 부모중 relative, absolute, fixed중 하나라도 있으면 절대적으로 움직입니다.
• 일반적으로 absolute를 쓰는 경우에는 기준이 될 부모에게 position: relative; 를 사용하면 됩니다.

  .right-0 {
    right: 0;
    bottom: 0;
  }

  절대적 위치에서는 부모기준으로 right가 붙습니다.

Position - fixed

• 고정적 위치는 사용하면 고정적인 위치로 사용할 수 있습니다. 스크롤을 내려도 위치가 고정됩니다.

  .coupon { 
    position: fixed;
    right: 0; // 브라우저 옆에 붙어져있음
    bottom: 0;
    background-color: red;
    color: white;
    font-size: 20px;
  }