[CSS] position

static - 기본으로 정해진 위치에서 값을 변경해도 이동하지 않음(기본 값)
relative - 정해진 위치에서 입력한 값만큼 이동함
absolute - html태그를 기준으로 입력한 값만큼 위치를 이동함
fixed - 스크롤이 이동해도 정해진 위치에 고정해 이동하지 않음

- position: static를 안해도 기본값으로 position은 static이다

<template>
  <div id="main">
    main
    <div id="static">
      static
    </div>
    <div id="relative">
      relative
    </div>
    <div id="fixed">
      fixed
    </div>
  </div>
</template>

<script>

export default {

}
</script>

<style scoped>
 #main{
   border: 5px solid red;
   margin-bottom: 500px;
   padding: 50px;
 }
 #static{
   /* position: static; */
   border: 5px solid black;
   left: 1000px;
   top: 1000px;
 }
 #relative{
   /* position: relative; */
   border: 5px solid blue;
   left: 100px;
   top: 100px;
 }
 #fixed{
   /* position: fixed; */
   background-color: black;
   color: white;
   bottom: 0px;
   left: 0px;
 }
</style>

position 지정하기 전

position 지정한 후