Rumah  >  Artikel  >  hujung hadapan web  >  Bolehkah kita Menyusun Berbilang Elemen Melekit di Atas Satu Sama Lain dalam CSS Tulen?

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

DDD
DDDasal
2024-11-01 02:00:02804semak imbas

Can we Stack Multiple Sticky Elements on Top of Each Other in Pure CSS?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn