여러 개의 고정 요소를 순수 CSS에 쌓을 수 있나요?

순수한 CSS에서 여러 개의 끈적한 요소를 서로 쌓을 수 있습니까?

원하는 동작은 여기에서 볼 수 있습니다.
https://webthemez.com/demo/sticky-multi-header-scroll/index.html

저는 Javascript 구현 대신 순수 CSS를 사용하는 것을 선호합니다. 여러 개의 끈적끈적한 요소를 사용하여 약간의 실험을 해봤지만 다른 끈적한 요소를 밀어내는 것을 막을 수는 없습니다. 동일한 스태킹 컨텍스트에 배치해 보았습니다.

<code class="css">#sticky .sticky-1,
#sticky .sticky-2
{
  position: sticky;
}
#sticky .sticky-1
{
  top: 1em;
  z-index: 1;
}
#sticky .sticky-2
{
  top: 2em;
  z-index: 1;
}</code>

그러나 아래에서 볼 수 있듯이 제대로 작동하지 않습니다. 어떤 통찰력이라도 대단히 감사하겠습니다!

<code class="html"><div id="container">
  <article id="sticky">
    <header>

    </header>
    <main><h1 class="sticky-1">Sticky heading</h1></code>

위 내용은 여러 개의 고정 요소를 순수 CSS에 쌓을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!