css : position - relative, absolute, fixed

static

기본적으로 모든 태그들은 static 속성을 가지고 있다. ( 기본값으로 직접 설정해 줄 일은 없다. )

relative

static이었을 때의 기준으로 움직일 수 있다.
top, right, left 등의 속성을 사용하여 움직임!
ex)

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

}

위의 코드의 경우 top: -20px은 윗 방향으로 20만큼 올라가지고, 만약 top: 20px을 하면 밑에 방향으로 20px 만큼 움직여 진다.

absolute

absolute의 경우 부모 요소(relative, fixed, absolute가 되어있는 부모 )를 기준으로 움직인다.
➡️ 부모중에 relative, fixed, absolute인 태그가 없으면 body 태그가 기준

.parent {
	position: relative;
 	width:200px;
 	height:100px;
}
.child {
	position: absolute; 
	top: 0;
 }

fixed

fixed는 설정한 위치에 그대로 고정되는데, 부모에 의해 값이 정해지는 것이 아니라 브라우저 화면 크기만큼, 화면 내에서만 움직인다.

.fixed {
  position: fixed;
  right: 0;
  bottom: 0;
}