위치 지정된 요소 내에 중첩된 경우 고정 탐색이 작동하지 않는 이유는 무엇입니까?

중첩 요소 내의 "position:sticky" 문제 해결

"position:sticky"로 고정 기능을 정의할 때 다음과 같은 상황이 발생할 수 있습니다. 중첩된 요소 내에서 동작이 일관되지 않게 됩니다. 이 문제가 발생하는 이유와 해결 방법을 살펴보겠습니다.

문제 이해

"position:sticky"는 뷰포트를 기준으로 요소의 위치를 ​​지정하여 "sticky"를 생성합니다. " 스크롤할 때 효과가 나타납니다. 그러나 요소가 위치가 지정된 다른 요소 내에 중첩되면 "position:sticky" 속성이 다르게 동작합니다.

귀하의 예에는 "position:absolute" 및 "nav"가 포함된 "nav-wrapper"가 있습니다. " 요소 안에 "position:sticky"가 포함되어 있습니다. 여기서 문제는 상위 요소("nav-wrapper")가 고정 요소("nav")의 높이를 정의하여 상위 요소 내에서 고정 동작이 발생할 여지가 없다는 것입니다.

문제 해결

이 문제를 해결하려면 상위 요소가 고정 요소의 높이를 제한하지 않는지 확인하세요. 이는 고정 높이를 제거하거나 "최소 높이" 또는 "최대 높이"와 같은 유연한 크기 조정 옵션을 사용하여 달성할 수 있습니다.

시각화를 위한 테두리의 예

다음은 더 쉽게 부모 요소에 테두리를 추가한 예입니다. 시각화:

.nav-wrapper {
  position: absolute;
  bottom: 0;
  border: 2px solid;
}

.nav-wrapper nav {
  position: sticky;
  top: 0;
}

body {
  min-height: 200vh;
}

<div class="nav-wrapper">
  <nav>
    <a href="#">
      <li>Home</li>
    </a>
    <a href="#">
      <li>About</li>
    </a>
  </nav>
</div>

상위 요소에서 고정 높이를 제거하면 고정 동작이 이제 중첩 요소 내에서 예상대로 작동합니다.

위 내용은 위치 지정된 요소 내에 중첩된 경우 고정 탐색이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!