스크롤 상자가 CSS의 고정 위치 지정에 어떤 영향을 줍니까?

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

CSS 위치 지정 레이아웃 모듈은 가장 가까운 조상을 기준으로 상자의 오프셋을 계산하는 방법으로 고정 위치 지정을 정의합니다. "스크롤 상자" 또는 뷰포트를 사용합니다. 그러나 스크롤 상자의 정확한 특성은 약간의 혼란을 불러일으켰습니다.

스크롤 상자 정의

스크롤 상자는 기본적으로 오버플로 속성이 표시되지 않는 값으로 설정된 상자입니다. 예를 들어 오버플로를 숨김으로 설정하면 스크롤 가능한 콘텐츠가 있는 상자가 생성됩니다.

고정 위치 지정에 미치는 영향

고정 위치 지정의 맥락에서 고정 요소에 가장 가까운 스크롤 상자가 중요한 역할을 합니다. . 고정 요소의 조상에 스크롤 값으로 설정된 오버플로가 있는 경우 고정 요소의 오프셋은 해당 스크롤 상자를 기준으로 계산됩니다.

스크롤 상자 켜기 또는 끄기

상자는 스크롤 상자가 되므로 이에 따라 오버플로 속성을 설정해야 합니다. 오버플로를 표시로 설정하면 스크롤 상자가 생성되지 않고, 자동, 스크롤 또는 숨김으로 설정하면 스크롤 상자가 생성됩니다.

예

다음 예를 고려하세요.

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

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

이 코드는 키가 큰 컨테이너(래퍼)와 그 안에 끈적한 요소(div)를 생성합니다. 래퍼에 Overflow:Hidden이 있어 스크롤 상자가 됩니다. 사용자가 페이지를 스크롤하면 고정 요소는 래퍼 상단에 도달할 때까지 뷰포트 상단에 고정됩니다. 이 시점에서 고정 요소는 가장 가까운 스크롤 상자인 래퍼의 상단에 도달했기 때문에 스크롤을 중지합니다.

위 내용은 스크롤 상자가 CSS의 고정 위치 지정에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!