오버플로가 CSS 위치 레이아웃 모듈 레벨 3의 고정 위치 지정에 어떤 영향을 미치나요?

CSS 위치 지정 레이아웃 모듈 레벨 3의 스크롤 상자

CSS 위치 지정 레이아웃 모듈 레벨 3은 다음 동작과 유사한 고정 위치 지정을 정의합니다. 상대적으로 위치한 상자의. 그러나 스크롤 상자가 있는 가장 가까운 조상 또는 스크롤 상자가 없는 조상이 없는 경우 뷰포트를 기준으로 오프셋이 계산됩니다.

스크롤 상자의 자격은 무엇입니까?

스크롤링 상자는 오버플로 값이 표시(기본값) 이외의 값으로 설정된 상자입니다. 이는 오버플로로 인해 고정 요소 문제가 발생한 이전 문서를 기반으로 합니다.

고정 위치 지정에 대한 오버플로의 영향

overflow:hidden이 있는 요소가 조상인 경우 위치: 고정 요소의 경우 후자의 오프셋은 숨겨진 오버플로가 있는 조상 상자를 기반으로 계산됩니다. 결과적으로 스크롤 동작이 제한되어 고정 요소가 표시되지 않습니다.

코드 예

.wrapper {
  height:200vh;
  border:2px solid;
}
.wrapper >div {
  position:sticky;
  top:0;
  height:20px;
  background:red;
}

<div class="wrapper">
  <div></div>
</div>

위 내용은 오버플로가 CSS 위치 레이아웃 모듈 레벨 3의 고정 위치 지정에 어떤 영향을 미치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!