24_Position

• position의 기본값으로 top, bottom, left, right property로 위치 조정이 불가능하다.

• static일 때의 위치를 기준으로 상대적인 위치를 조정한다.
  :: static일 때의 위치를 기준 (= 상대적인 위치를 설정하지 않을 경우 static일 때와 같은 곳에 위치한다.)
  :: 상대적인 위치를 조정 (= top, bottom, left, right property를 사용하여 기준점에서 위치를 이동시킨다.)

.container {
  position: relative;
  top: 20px;
  left: 50px;
  border: 5px solid green;
  width: 400px;
  height: 200px;
}

.content {
  position: relative;
  top: 20px;
  left: 50px;
  border: 5px solid red;
  width: 200px;
  height: 100px;
}

• 상대적인 위치를 설정하지 않은 경우
  :: static일 때와 같은 곳에 위치한다.

• (상대적인 위치 설정 후) 조상 element의 Position이 모두 static인 경우
  :: html이 기준(컨테이닝 블록)이 된다.

.container {
  border: 5px solid green;
  width: 400px;
  height: 200px;
}

.content {
  position: absolute;
  right: 0;
  border: 5px solid red;
  width: 200px;
  height: 100px;
}

• (상대적인 위치 설정 후) 조상 element 중 Position이 static이 아닌 element가 있는 경우
  :: static이 아닌 조상 element 중 가장 가까운 조상 element가 기준(컨테이닝 블록)이 된다.

.container {
  position: relative;
  border: 5px solid green;
  width: 400px;
  height: 200px;
}

.content {
  position: absolute;
  right: 0;
  border: 5px solid red;
  width: 200px;
  height: 100px;
}

• 뷰포트를 기준(컨테이닝 블록)으로 상대적인 위치를 고정하여 뷰포트를 따라다닌다. 조상 element의 영향을 받지 않는다. 주로 뱃지, 상담창, 네비게이션바 등에 사용된다.

** 뷰포트: 현재 창에서 문서를 볼 수 있는 부분, 전체화면이라면 화면 전체를 말한다.

.container {
  border: 5px solid green;
  width: 400px;
  height: 200px;
}

.content {
  position: fixed;
  top: 150px;
  left: 50px;
  border: 5px solid red;
  width: 200px;
  height: 100px;
}