如何创建不同级别的粘性标头？

我认为执行此 *** 作的逻辑方法是考虑嵌套div，如下所示：

h1,h2,h3 {  position: -webkit-sticky;  position: sticky;  top: 0px;  margin:0;}h1 {  background-color: red;  height: 35px;  z-index:3;}h2 {  background-color: blue;  height: 25px;  top:35px;  z-index:2;}h3 {  background-color: green;  height: 20px;  top:60px;  z-index:1;}<div>  <h1>Header 1a</h1>  <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>  <div>    <h2>Header 2a</h2>    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>    <div>      <h3>Header 3a</h3>      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>      <h3>Header 3b</h3>      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>    </div>  </div>  <div>    <h2>Header 2b</h2>    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>    <div>      <h3>Header 3c</h3>      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>      <h3>Header 3d</h3>      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>    </div>  </div></div><div>  <h1>Header 1b</h1>  <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>  <div>    <h2>Header 2c</h2>    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>    <div>      <h3>Header 3e</h3>      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>      <h3>Header 3f</h3>      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>    </div>  </div>  <div>    <h2>Header 2d</h2>    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>    <div>      <h3>Header 3g</h3>      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>      <h3>Header 3h</h3>      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>    </div>  </div></div>