[HTML] 부모 relative, 자식 absolue 사이에, wrapper 태그를 삽입?

부모태그 relative, 자식 태그 absolute 를 지정하였는데, 부모와 자식 사이에 래퍼 태그를 추가해야 할 경우가 있다면, 보무태그와 자식태그의 관계가 깨지지 않도록 래퍼 태그를 추가하는 방법을 알려줘

 

부모 태그와 자식 태그 사이에 래퍼 태그를 추가하면서, 부모와 자식 태그의 관계가 깨지지 않도록 하는 방법을 알려드리겠습니다.

1. 부모 태그에 position: relative 속성을 유지합니다.
2. 자식 태그에 position: absolute 속성을 유지합니다.
3. 래퍼 태그를 추가할 때, 래퍼 태그에는 특별한 포지셔닝 속성을 주지 않습니다. 기본적으로 position: static 속성이 적용됩니다.

다음은 예제 코드입니다:

원본 구조

<div class="parent">
  <div class="child">
    자식 태그 내용
  </div>
</div>

.parent {
  position: relative;
}

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

 

래퍼 태그 추가된 구조

<div class="parent">
  <div class="wrapper">
    <div class="child">
      자식 태그 내용
    </div>
  </div>
</div>

.parent {
  position: relative;
}

.wrapper {
  /* 기본적으로 position: static 이므로, 특별히 설정할 필요가 없습니다. */
}

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

 

이렇게 하면 parent 태그와 child 태그의 포지셔닝 관계는 유지되며, wrapper 태그가 중간에 추가됩니다. wrapper 태그는 포지셔닝에 영향을 주지 않기 때문에 부모와 자식 사이의 상대적인 위치 관계는 그대로 유지됩니다.

추가 참고 사항

래퍼 태그를 추가할 때 CSS를 통해 스타일을 조정해야 하는 경우, wrapper 태그에 필요한 스타일을 추가할 수 있습니다. 단, position 속성은 변경하지 않는 것이 중요합니다.

예를 들어, wrapper 태그에 여백이나 패딩을 추가하려는 경우:

.wrapper {
  margin: 20px;
  padding: 10px;
}

 

이러한 방법으로, 부모와 자식 태그의 포지셔닝 관계를 유지하면서 래퍼 태그를 추가할 수 있습니다.