내 고정 요소가 상위 컨테이너 내부에서 작동하지 않는 이유는 무엇입니까?

고정 요소가 상위 요소 내에서 작동하지 않음

위치: 고정이 다른 요소 내에 중첩되면 예상대로 작동하지 않는 시나리오가 발생할 수 있습니다.

position:sticky 가 상위 요소의 크기를 고려하기 때문에 문제가 발생합니다. 상위 요소의 높이가 끈적한 하위 요소에 의해 결정되는 경우 하위 요소가 달라붙을 공간이 없습니다.

예:

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

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

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

시각화하기 위한 테두리 문제:

.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>

해결책:

이 문제를 해결하려면 상위 요소의 크기가 독립적으로 정의되어 끈적한 하위 요소를 위한 공간이 남아 있는지 확인하세요. 이는 height 또는 min-height와 같은 CSS 속성을 사용하여 달성할 수 있습니다.

위 내용은 내 고정 요소가 상위 컨테이너 내부에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!