스티키 인 포지션 사용법

위치에 고정을 사용하는 단계: 1. 요소에 "위치: 고정" 속성을 추가합니다. 2. 스크롤 상자를 사용하여 가장 가까운 상위 요소를 기준으로 요소의 위치를 ​​지정합니다. 하단 또는 왼쪽 속성을 사용하여 오프셋 값을 설정합니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, Dell G3 컴퓨터.

위치: 고정은 스크롤하는 동안 요소가 특정 위치에 머물 수 있도록 하는 CSS의 위치 지정 속성입니다. 요소가 지정된 오프셋으로 스크롤되면 "고정 위치"가 되어 다른 지정된 오프셋으로 스크롤될 때까지 해당 위치에 유지됩니다.

position:sticky를 사용하려면 다음 단계가 필요합니다.

1.요소에 position:sticky 속성을 추가합니다.

2 스크롤 상자를 사용하여 가장 가까운 상위 요소를 기준으로 지정된 요소를 배치하려면 위쪽, 오른쪽, 아래쪽 또는 왼쪽 속성을 사용하여 오프셋 값을 설정할 수 있습니다.

예를 들어 position:sticky:

.container {
  height: 400px;
  overflow: auto;
}
.sticky-element {
  position: sticky;
  top: 20px;
  background-color: #f1f1f1;
  padding: 10px;
}

<div class="container">
  <div class="sticky-element">
    这是一个粘性元素
  </div>
  <!-- 其他内容 -->
</div>

를 사용하는 예는 다음과 같습니다. 위의 예에서 .sticky-element 요소는 .container 요소 상단에서 20px만큼 스크롤할 때 해당 위치에 유지됩니다.

일부 이전 버전의 브라우저에서는 position:sticky 속성이 지원되지 않을 수 있으므로 사용 시 호환성 테스트가 필요하다는 점에 유의하세요.

위 내용은 스티키 인 포지션 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!