[CSS] Position: Relative - Absolute 다중 구성 처리 방법

스타일링을 할 때, 여러 레벨의 컨테이너와 서브 요소가 포함된 경우, 상대적(position: relative) 및 절대적(position: absolute) 위치를 설정하여 원하는 레이아웃을 만들 수 있습니다. 예시를 통해 이를 설명해보겠습니다.

 

우선, HTML 구조를 가정해봅시다:

<div class="container">
  <div class="sub-container">
    <div class="sub">
      <div class="sub-sub-container">
        <div class="sub-sub">내용</div>
      </div>
    </div>
  </div>
</div>

 

위의 구조를 가지고 SASS로 스타일을 잡아보겠습니다:

.container {
  position: relative;

  .sub-container {
    position: absolute;
    top: 10px; // 원하는 위치
    left: 10px; // 원하는 위치

    .sub {
      position: relative;

      .sub-sub-container {
        position: absolute;
        top: 5px; // 원하는 위치
        left: 5px; // 원하는 위치

        .sub-sub {
          position: relative;
          // 추가 스타일을 여기서 지정할 수 있습니다.
        }
      }
    }
  }
}

 

이제 각 스타일이 어떻게 적용되는지 설명하겠습니다:

1. .container는 position: relative로 설정되어 있습니다. 이는 .container를 기준으로 자식 요소의 절대적 위치를 설정할 수 있게 합니다.
2. .sub-container는 position: absolute로 설정되어 있으며, .container를 기준으로 위치가 설정됩니다 (top: 10px, left: 10px).
3. .sub는 다시 position: relative로 설정됩니다. 이는 .sub 내부의 절대적 위치 요소의 기준이 됩니다.
4. .sub-sub-container는 position: absolute로 설정되며, .sub를 기준으로 위치가 설정됩니다 (top: 5px, left: 5px).
5. 마지막으로 .sub-sub는 position: relative로 설정됩니다. 이는 .sub-sub 내부에서 더 많은 절대적 위치 요소를 포함할 수 있게 합니다.

참고로 CSS로는 이렇습니다.

.container {
  position: relative;
}

.sub-container {
  position: absolute;
  top: 10px; /* 원하는 위치 */
  left: 10px; /* 원하는 위치 */
}

.sub {
  position: relative;
}

.sub-sub-container {
  position: absolute;
  top: 5px; /* 원하는 위치 */
  left: 5px; /* 원하는 위치 */
}

.sub-sub {
  position: relative;
  /* 추가 스타일을 여기서 지정할 수 있습니다 */
}

 

이와 같이 SASS를 사용하여 스타일을 설정하면 여러 레벨의 컨테이너와 서브 요소를 효과적으로 관리할 수 있습니다. 필요에 따라 top, left, bottom, right 속성을 조정하여 위치를 변경할 수 있습니다.