순수 CSS에서 여러 고정 요소를 서로 쌓는 방법은 무엇입니까?

문제 이해:

순수한 CSS에서 서로 위에 쌓인 여러 개의 끈적한 요소는 구현하기 어려울 수 있습니다. 다른 끈적끈적한 요소를 밀어냅니다. 질문에 제공된 예는 스크롤할 때 두 개의 고정 제목("고정 제목" 및 "두 제목이 동시에 고정되어야 합니다.")이 누적된 상태로 유지되지 않는 이러한 동작을 보여줍니다.

해결 방법:

원하는 동작을 달성하려면 오프셋을 추가하여 모든 고정 요소가 동일한 컨테이너(블록 포함)에 달라붙도록 해야 합니다. 해결 방법은 다음과 같습니다.

• 컨테이너 결정:

  • 모든 끈적한 요소가 붙어야 하는 상위 요소를 식별합니다. (예:
    요소).

• 고정 위치 적용:

  • 위치 추가: 끈적 속성을 모든 고정 요소에 적용합니다.

• 오프셋 거리 설정:

  • 상위 속성을 사용하여 오프셋 거리를 지정합니다.

• 오프셋 거리 조정:

  • 각 후속 고정 요소에는 상단 속성이 있어야 합니다. 값은 이전 끈적 요소의 높이만큼 증가하여 올바르게 쌓였는지 확인합니다.

예제 코드:

다음은 다음과 같습니다. 고정 요소에 오프셋이 추가된 제공된 코드의 수정된 버전입니다. 이제 스크롤할 때 고정 요소가 서로 겹쳐 쌓입니다.

<code class="html"><div id="container">
  <article id="sticky">
    <header>Both headings should stick at the same time.</header>
    <main>
      <h1 class="sticky-1">Sticky heading</h1>
      <p>Some copy goes here...</p>
    </main>
  </article>

  <article id="fixed">
    <header>Fixed heading</header>
    <main>
      <h1 class="sticky-1">Sticky heading</h1>
      <p>Some copy goes here...</p>
    </main>
  </article>
</div></code>

<code class="css">#sticky .sticky-1,
#sticky .sticky-2 {
  position: sticky;
}
#sticky .sticky-1 {
  top: 1em;
}
#sticky .sticky-2 {
  top: calc(1em + 50px);
}
#fixed .sticky-1 {
  position: fixed;
  top: 0;
}
#fixed .sticky-2 {
  position: fixed;
  top: 1em;
}</code>

오프셋 개념을 통합하여 이 예의 고정 요소는 이제 스크롤하는 동안 올바르게 스택된 상태를 유지합니다.

위 내용은 순수 CSS에서 여러 고정 요소를 서로 쌓는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!