CSS에서 하위 DIV를 상위 DIV보다 넓게 만들 수 있나요?

상위 한계를 넘어 하위 DIV 너비 확장

CSS에서는 일반적으로 하위 DIV를 상위 DIV보다 넓게 만드는 것이 바람직하지 않습니다. 그러나 이러한 상황에 처한 경우에는 몇 가지 해결 방법이 있습니다.

옵션 1: 절대 위치 지정 사용

하위 DIV를 제거할 수 있는 경우 문서 흐름에서 절대 위치 지정을 사용하여 너비를 브라우저 뷰포트의 100%로 설정할 수 있습니다. 자식을 가장자리에서 가장자리까지 수평으로 늘리려면 왼쪽과 오른쪽을 0으로 설정해야 합니다.

옵션 2: 계산 가능한 여백이 있는 일반 솔루션

하위 DIV를 유지하려면 문서 흐름에서 원하는 너비를 얻기 위해 음수 여백을 계산할 수 있습니다.

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

이 솔루션은 하위 여백을 보장합니다. DIV는 뷰포트를 채우기 위해 너비를 확장하는 동안 상위 항목 내에 유지됩니다. 이 공식에서:

• -50vw는 하위 DIV를 뷰포트 너비의 절반만큼 왼쪽으로 이동합니다
• 50%는 상위 너비의 절반을 추가하여 이 이동을 상쇄합니다

친척에 대한 고려사항 위치 지정

상위 DIV에 position:relative가 있는 경우 하위 DIV의 왼쪽 및 오른쪽 속성은 상위 DIV를 기준으로 합니다. 이를 방지하려면 변환 속성을 사용하여 하위 DIV를 변환할 수 있습니다.

.child {
  ...
  transform: translate(-50%, 0);
}

이렇게 하면 하위 DIV가 해당 컨테이너를 존중하면서 상위 경계를 넘어 확장됩니다.

위 내용은 CSS에서 하위 DIV를 상위 DIV보다 넓게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!