절대 위치의 내부 DIV가 상위의 Overflow:hidden 속성을 존중하도록 하려면 어떻게 해야 합니까?

위치 절대 대 오버플로 숨김

딜레마:

두 개의 중첩 DIV가 있습니다. 오버플로가 있는 외부 DIV: 숨겨지고 내부 DIV가 절대적으로 위치합니다. 기본적으로 내부 DIV는 외부 DIV의 오버플로 동작을 따르지 않습니다. 외부 DIV의 위치를 ​​절대 위치로 변경하여 레이아웃을 방해하지 않고 어떻게 이 동작을 유지할 수 있습니까?

해결책:

내부 DIV가 외부 DIV의 위치를 ​​존중하도록 하려면 오버플로 속성:

1. 외부 DIV의 위치를 ​​다음으로 변경합니다. 상대적입니다.
2. 내부 DIV의 절대 위치를 유지합니다.

예:

#outer {
  width: 200px;
  height: 200px;
  background-color: green;
  overflow: hidden;
  position: relative;  // Make outer DIV relative
}

#inner {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;  // Keep inner DIV absolute
  left: 250px;
  top: 250px;
}

추가 참고 사항:

• 사용 외부 DIV에 대한 position:relative는 디스플레이나 레이아웃에 영향을 주지 않습니다.
• 내부 DIV는 position:absolute를 유지해야 오버플로 동작을 유지하면서 외부 DIV의 경계를 "이스케이프"할 수 있습니다.
• 테이블 셀에서 내부 DIV가 커지는 특정 사례의 경우 솔루션은 동일하게 유지됩니다. 외부 표 셀을 상대 위치에, 내부 DIV를 절대 위치에 배치하면 원하는 효과를 얻을 수 있습니다.

위 내용은 절대 위치의 내부 DIV가 상위의 Overflow:hidden 속성을 존중하도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!