CSS Position의 static, relative, absolute, sticky, fixed의 차이

*static : 포지션의 기본값이다. top,bottm등 포지션 값을 적용할 수 없고 html내에서 기본적으로 구조상 지정된 구간을 꼿꼿히 지키고 있는다.

*relative : 기존의 static 포지션을 기준으로 움직일 수 있다.

.box1{
position : relative;
top : 30px;
left : 100px;
};

box1을 static 포지션 값에서 '위에서 부터' 30px(즉, 아래로 30px 옮김)옮기고, 
'왼쪽에서 부터' 100px(즉, 오른쪽으로 100px 옮김) 옮긴다.

*absolute : 자신의 부모 노드 중 static이 아닌 부모 노드를 기준으로 옮긴다.

 .box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
  }
  .inner {
    width: 100%;
    height: 50%;
  }
  .box1 .inner1 {
    position: absolute;
    top: 30px;
    left: 100px;
  }
  
  
   <div class="box box1">
    <div class="inner inner1">inner1</div>
    <div class="inner inner2">inner2</div>
  </div>
  
  box1.inner1의 부모 노드는 box이다.
  그리고 box는 position이 relative로 지정되어 있기 때문에,
  static이 아닌 부모노드가 맞다. 
  즉, box1.inner1(absolute)은 "box의 위치를 기준으로 그 안에서"
  포지션을 옮긴다.
  

*sticky : 포지션을 반드시 지정해줘야 한다. 자신의 부모 박스 안에서 지정 된 포지션을 지킨다. 뷰포트(viewport)를 스크롤해서 화면에 더이상 보이지 않는 상태에서도 지정 된 공간을 계속 유지한다.

*fixed : 부모 박스에서 완전히 빠져나와서 뷰포트를 기준으로 포지션을 결정한다.