고정 위치 상위 및 하위 요소에서 `overflow:hidden`이 작동하지 않는 이유는 무엇입니까?

오버플로:hidden이 고정된 상위/하위 요소에서 작동하지 않음

질문:

오버플로가 발생하지 않는 이유: 고정된 부모/자식의 숨겨진 속성 기능 요소?

예:

.parent {
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background: #555;
}

.children {
  position: fixed;
  top: 200px;
  left: 200px;
  width: 150px;
  height: 150px;
  background: #333;
}

<div class="parent">
  <div class="children"></div>
</div>

정답:

CSS 클립: ect()는 클립할 수 있습니다. 고정된 위치 요소를 상위 요소로 지정합니다. 그러나 몇 가지 주의 사항이 있습니다.

• 상위 위치는 정적이거나 상대적일 수 없습니다.
• 직선 좌표에는 백분율이 지원되지 않습니다(auto는 100%와 동일하지만).
• 하위 요소의 위치 지정 및 CSS3 변환이 제한될 수 있습니다. options.

clip 사용 예는 업데이트된 JSFiddle 데모를 참조하세요: ret().

추가 참고 사항:

• 백페이스 가시성 사용: Chrome 지원 개선을 위해 하위 요소에 숨겨져 있습니다.
• 지원 구형 및 모바일 브라우저는 제한될 수 있습니다.

위 내용은 고정 위치 상위 및 하위 요소에서 `overflow:hidden`이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!