CSS 위치 지정에서 스크롤 상자를 결정하는 것은 무엇입니까?

CSS 위치 지정의 스크롤 상자 이해

CSS 위치 지정 레이아웃 모듈 레벨 3(작업 초안)에서 등장한 "스크롤 상자" 개념 , 특히 끈적한 위치 지정의 맥락에서 그렇습니다. 정의에 따르면 고정 위치 상자의 오프셋은 스크롤 상자 또는 뷰포트가 있는 가장 가까운 조상(해당 조상이 없는 경우)을 기준으로 계산됩니다.

스크롤 상자 정의

초안에서의 용어 사용에도 불구하고 CSS의 다른 부분에서는 정확한 정의가 부족합니다. 그러나 사용 가능한 정보에 따르면 스크롤 상자는 다음과 같이 이해됩니다.

• "오버플로" 속성 값이 "visible"(기본값) 이외의 값으로 설정된 상자입니다.

이러한 이해는 오버플로 문제가 끈적한 동작에 영향을 미칠 수 있는 예와 일치합니다.

스크롤 상자 식별

실제로 상자가 스크롤 상자인지 여부를 켜거나 끄는 것은 "오버플로" 속성을 수정하여 달성할 수 있습니다. 예:

• 상자의 상위 항목으로 Overflow:hidden이 있는 경우 그 안에 있는 position:sticky 요소는 스크롤되지 않습니다. 해당 오프셋은 숨겨진 상자를 기준으로 계산되기 때문입니다.
• 반대로, 조상 상자에 Overflow:scroll을 설정하면 해당 위치:고정 자손이 그 안에서 스크롤될 수 있습니다. box.

예

다음 예를 고려하세요.

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

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

이 예에서 .wrapper div는 Overflow:scroll로 인한 스크롤 상자. 따라서 고정 div는 래퍼 내에서 스크롤됩니다.

위 내용은 CSS 위치 지정에서 스크롤 상자를 결정하는 것은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!