Bolehkah kita Menyusun Berbilang Elemen Melekit di Atas Satu Sama Lain dalam CSS Tulen?

Melaksanakan berbilang elemen melekit berkedudukan mutlak bertindan dalam CSS tulen

Soalan:

Adakah mungkin dalam CSS tulen Bagaimana untuk susun berbilang elemen melekit di atas satu sama lain?

Contoh:

https://webthemez.com/demo/sticky-multi-header-scroll/index.html

Saya lebih suka Gunakan CSS tulen, bukan pelaksanaan JavaScript. Saya telah mencuba berbilang elemen melekit tetapi saya tidak dapat menghalangnya daripada memerah unsur melekit lain. Saya cuba meletakkannya dalam konteks tindanan yang sama:

#sticky .sticky-1,
#sticky .sticky-2
{
  position: sticky;
}
#sticky .sticky-1
{
  top: 1em;
  z-index: 1;
}
#sticky .sticky-2
{
  top: 2em;
  z-index: 1;
}

tetapi ia tidak berfungsi seperti yang anda boleh lihat dalam coretan .html di bawah. Sebarang pandangan akan sangat dihargai!

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

Atas ialah kandungan terperinci Bolehkah kita Menyusun Berbilang Elemen Melekit di Atas Satu Sama Lain dalam CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!