다른 요소 내에 중첩되면 고정 탐색이 사라지는 이유는 무엇입니까?

문제: 요소가 중첩되면 고정 위치가 사라집니다

CSS에서 다른 요소 내에 고정 탐색을 정의했지만 중첩되었을 때 끈끈한 동작을 유지하지 못합니다. 왜 이런 일이 발생합니까?

설명:

Position: Sticky는 상위 요소를 기준으로 위치를 계산합니다. 다른 요소(예: .nav-wrapper) 내에 탐색을 중첩하면 상위 요소가 고정 동작을 결정합니다.

안타깝게도 귀하의 예에서 .nav-wrapper의 높이는 고정 에 의해 결정됩니다. 탐색 요소. 결과적으로 상위 요소 내에 .nav 요소를 고정할 수 있는 공간이 없습니다.

해결책:

이 문제를 해결하려면 테두리를 추가하면 됩니다. 문제를 설명하기 위해 상위 요소에 추가합니다. 스크롤하면 부모 높이가 탐색 높이와 일치하여 끈적거리는 동작이 발생할 여지가 없음을 알 수 있습니다.

테두리의 예:

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

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

body {
  min-height:200vh;
}

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