<body>
    <div class="outer">
      <div class="box box1">
        <div class="inner inner1">inner1</div>
        <div class="inner inner2">inner2</div>
      </div>
    </div>
    <div class="outer">
      <div class="box box2">
        <div class="inner inner1">inner1</div>
        <div class="inner inner2">inner2</div>
      </div>
    </div>
  </body>

.outer {
        width: 200px;
        height: 200px;
        margin-top: 30px;
        margin-bottom: 20px;
        margin-left: 100px;
        background-color: green;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .inner {
        width: 100%;
        height: 50%;
      }
      .inner1 {
        background-color: blue;
      }
      .inner2 {
        background-color: yellow;
      }

📌 static

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

📌 relative

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

위에서 30px만큼, 왼쪽에서 100px 만큼 이동했고, 원래 위치해있던 자리는 그대로 남겨져있다.

📌absolute -1 (body 기준)

.box2 .inner1 {
        position: absolute;
        top: 30px;
        left: 100px;
        opacity: 0.3;
      }

본래의 inner 사이즈가 %로 되어있어서 그 기준이 body로 잡혀 사이즈가 결정됐다.