[HTML] relative와 absolute 관계

relative와 absolute의 공통점

• positioning 속성으로 요소의 위치를 결정하는 데 사용
  
  
  

position: relative

• relative는 요소를 기준 위치를 기준 으로 이동시킨다.

  div  {
  	position: relative;
  	top: 10px; /* 원래 위치에서 10px 아래로 이동  */
  	left: 20px; /* 원래 위치에서 20px 오른쪽으로 이동  */
  }

position: absolute

• absolute는 최상위 위치가 되는 요소(보통 가장 가까운 position: relative를 가진 부모 요소)를 기준으로 배치
  ❗❗ relative설정된 부모가 없다면, 상위요소까지 흐름을 보아서 기준 위치를 설정한다.

  • 예를 들어, relative가 없다면 body, html 등 기준으로 위치를 설정한다.

    div {
      position: absolute;
      top: 50px;  /* 가장 가까운 relative 부모 요소에서 50px 아래로 이동 */
      left: 100px; /* 가장 가까운 relative 부모 요소에서 100px 오른쪽으로 이동 */
    }

relative와 absolute의 관계

• position: relative가 적용된 부모 요소 내에서 position: absolute가 적용된 자식 요소는 부모 요소를 기준으로 위치 를 지정한다.

• 즉, absolute 요소는 가장 가까운 relative 요소를 기준으로 상대적 위치를 갖는다

• 올바른 예시

  <div class="parent">
    <div class="child">Absolute Position</div>
  </div>

  .parent {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: lightblue;
  }
  
  .child {
    position: absolute;
    top: 20px;
    left: 30px;
    background-color: lightcoral;
    padding: 10px;
  }
  

• child는 parent요소를 기준으로 top 20px, left 30px로 위치가 지정된다.