16. CSS_ Position

1. Position property

• Position : 조금 더 복잡한 레이아웃을 만들기 위함
• 종류 : relative / absolute / fix

1) position : relative

• 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작합니다.(의미 없음)
• 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.
• .relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
  }

2) absolute

• absolute는 가장 다루기 까다로운 위치 지정 값
• 절대적인 위치 지정 값
• 기준 : 특정 부모에 대해 절대적으로 움직이게 됩니다.
• 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.

3) fix

• 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻.
• relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용됩니다.
• .fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
  }

예시 참고 : https://ko.learnlayout.com/position.html