CSS를 사용하여 하위 DIV가 상위 너비를 초과할 수 있나요?

CSS를 사용하여 상위 경계를 넘어 하위 DIV 확장

하위 DIV를 하위 DIV로 유지하면서 상위 컨테이너보다 더 넓을 수 있나요? 이 질문은 특정 하위 DIV가 전체 브라우저 뷰포트를 사용해야 할 때 발생합니다.

기존 방법에서는 하위 DIV에 음수 여백을 적용합니다. 그러나 이 접근 방식은 특히 브라우저의 뷰포트가 변경될 때 역동성이 부족합니다.

해결책: 절대 위치 지정 및 상대 계산

상위 경계를 넘어 하위 DIV를 동적으로 확장하려면, 우리는 절대 위치 지정과 상대 위치 지정의 조합을 사용합니다. 계산:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

• width: 100vw는 하위 DIV에 전체 뷰포트에 걸쳐 있는 너비를 제공합니다.
• position:relative를 사용하면 상위 항목을 기준으로 하위 항목의 위치를 ​​조작할 수 있습니다.
• 왼쪽: calc(-50vw 50%)는 왼쪽 경계를 뷰포트 너비의 절반만큼 오프셋합니다. 효과적으로 하위 항목을 화면 중앙에 배치합니다.

이 솔루션을 사용하면 하위 DIV가 하위 요소로서의 위치를 ​​유지하면서 상위 DIV를 넘어 확장됩니다.

상대 위치 극복 제한 사항

단, 상위 DIV에 position:relative가 있는 경우 자식의 왼쪽 및 오른쪽 위치 지정 뷰포트가 아닌 상위 항목을 기준으로 합니다. 이를 수정하려면:

• 하위 위치를 절대 위치로 변경: 이렇게 하면 하위 위치가 상위 위치와 독립됩니다.
• 너비를 고정 값으로 설정합니다. : 자식이 부모의 속성을 상속받지 못하도록 방지 너비.
• 왼쪽 오프셋을 적절하게 조정합니다. 새로운 고정 너비를 기준으로 적절한 가운데 위치를 보장합니다.

위 내용은 CSS를 사용하여 하위 DIV가 상위 너비를 초과할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!