Vue CSS: Relative와 Absolute Position의 관계 이해하기

by

웹 개발에서 요소의 위치를 정하는 것은 중요합니다. Vue CSS를 사용할 때, position: relative와 position: absolute는 요소의 위치를 조정하는 데 주요한 역할을 합니다. 이들의 관계를 이해하는 것이 중요합니다.

1. Position Relative

position: relative;는 요소를 상대적 위치로 설정합니다. 이는 원래 위치를 기준으로 요소를 이동시키지만, 문서 흐름에는 여전히 포함됩니다.

예시:

.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}

2. Position Absolute

ai를 이용해서 전생을 그려주는 앱인 조선셀피를 알려주는 그림

position: absolute;는 요소를 문서 흐름에서 완전히 제거하고, 상대적 위치를 가진 부모 요소에 대해 절대적 위치를 설정합니다.

예시:

.absolute-box {
  position: absolute;
  top: 30px;
  right: 50px;
}

3. 상호작용

position: absolute;로 설정된 요소는 가장 가까운 position: relative;, position: absolute;, position: fixed;, 또는 position: sticky; 요소를 기준으로 위치합니다.

예시:

<div class="relative-parent">
  <div class="absolute-child">텍스트</div>
</div>


.relative-parent {
  position: relative;
  height: 100px;
  width: 200px;
}

.absolute-child {
  position: absolute;
  top: 10px;
  left: 10px;
}

여기서 .absolute-child는 .relative-parent 내에서 상대적으로 위치합니다.

4. 결론

position: relative와 position: absolute를 이해하고 올바르게 사용하는 것은 Vue CSS에서 웹 페이지 레이아웃을 구성하는 데 필수적입니다. 이들의 상호작용을 통해 복잡한 레이아웃도 쉽게 구현할 수 있습니다.

Leave a Comment