position-relative, absolute, fixed

• position
  웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성.
  position 속성을 이용하면 html코드 상관없이 텍스트나 이미지를 원하는 위치로 배치할 수 있고, 어떤 방식으로 놓을 지를 결정할 수 있음.
  static을 제외한 나머지 속성값들은 top, left, bottom, right 와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있음. 각 값들은 그 방향에서 얼마만큼 떨어져 위치시킬 것인 지를 나타냄.

• static
  static은 position 속성의 기본값. 요소를 나열한 순서대로 배치하며 top, right, bottom, left와 같은 속성을 사용할 수 없음. (float 속성은 가능!)

• relative
  static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값
  위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있음
  마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라가게 됨.

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

• absolute

absolute 속성값은 브라우저가 문서의 흐름과 상관없이 (요소를 수직으로 쭉 놓을지, 수평으로 쭉 놓을지 등을 결정하는 것) left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값
이때 기준이 되는 위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative, fixed,
absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직임

p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

• fixed
  fixed 속성값은 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정함. 하지만 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 됨. 따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 됨(기준점: 브라우저 왼쪽 위 꼭지점)
  absolute는 relative를 가진 부모가 필요했는데, fixed는 필요없음. fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직임.