Bolehkah Pelbagai Elemen Melekit Ditindan dalam CSS Tulen?

Adakah mungkin untuk mempunyai berbilang elemen melekit disusun di atas satu sama lain dalam CSS tulen?

Gelagat yang diingini boleh dilihat di sini:
https://webthemez.com/demo/sticky-multi-header-scroll/index.html

Hanya saya lebih suka menggunakan CSS tulen, bukannya pelaksanaan Javascript. Saya telah mencuba sedikit dengan berbilang elemen melekit, tetapi saya tidak dapat menghalangnya daripada menolak unsur melekit lain. Saya telah cuba meletakkannya dalam konteks tindanan yang sama:

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

Tetapi tidak dapat berfungsi, seperti yang anda lihat di bawah. Sebarang cerapan akan amat dihargai!

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

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

Atas ialah kandungan terperinci Bolehkah Pelbagai Elemen Melekit Ditindan dalam CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!