[CSS]position absolute - position relative

position absolute는 가장가까운 relative 를 가진 부모 기준으로 움직인다.

 

.nav__notification {
  background-color: tomato;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 600;
  position: absolute;
  right: 5px;
}

위의 문제점?

position absolute가 적용이 body에 되버려서 body기준으로 right 5px인것

 

position relative를 그럼 그위의 부모에다가 적용을 또시켜야됨

=> 적용시키니 위치가 변경됨

 

.nav__link {
  position: relative;
  color: black;
}

.nav__notification {
  background-color: tomato;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 600;
  position: absolute;
  left: 15px;
  bottom: 15px;
}