중첩된 고정 위치 지정이 실패하는 이유는 무엇이며 어떻게 해결할 수 있습니까?

고정 위치 지정 딜레마: 중첩 시 실패하는 이유

다른 요소 내부에 위치: 고정 요소를 배치하면 동작이 중단될 수 있습니다. 예상대로. 고정 위치 지정에서는 상위 요소의 크기를 고려하기 때문입니다.

문제 이해

제공된 예에서:

.nav-wrapper {
  position: absolute;
  bottom: 0;
}

상위 요소 (nav-wrapper)는 nav의 높이를 기준으로 높이를 정의합니다. element.

<div class="nav-wrapper">
  <nav>
    <a href="#">...</a>
    <a href="#">...</a>
  </nav>
</div>

nav 위치가 고정되어 있으면 브라우저 창 상단에 고정될 것으로 예상됩니다. 그러나 상위 요소가 사용 가능한 수직 공간을 모두 차지하기 때문에 탐색 기능이 붙을 공간이 없습니다.

문제 해결

끈끈한 작업을 수행하려면 이 시나리오에서는 부모 요소와 관계없이 탐색 요소에 자체 높이를 지정할 수 있습니다.

.nav-wrapper {
  position: absolute;
  bottom: 0;
  height: 50px;
}

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

두 요소의 높이를 모두 설정하여 nav-wrapper와 nav를 사용하면 고정 위치 지정이 올바르게 작동할 수 있도록 충분한 수직 공간을 확보할 수 있습니다.

위 내용은 중첩된 고정 위치 지정이 실패하는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!