Können wir in reinem CSS mehrere Sticky-Elemente übereinander stapeln?-CSS-Tutorial-php.cn

Können wir in reinem CSS mehrere Sticky-Elemente übereinander stapeln?

DDD

Freigeben： 2024-11-01 02:00:02

Original

956 Leute haben es durchsucht

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

Implementierung mehrerer gestapelter, absolut positionierter Sticky-Elemente in reinem CSS

Frage:

Ist das in reinem CSS möglich? How to Mehrere Klebeelemente übereinander stapeln?

Beispiel:

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

Ich bevorzuge die Verwendung reines CSS, keine JavaScript-Implementierung. Ich habe mehrere klebrige Elemente ausprobiert, aber ich kann nicht verhindern, dass sie andere klebrige Elemente verdrängen. Ich habe versucht, sie in denselben Stapelkontext zu platzieren:

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

Nach dem Login kopieren

, aber es hat nicht funktioniert, wie Sie im .html-Snippet unten sehen können. Für jeden Einblick wäre ich sehr dankbar!

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonKönnen wir in reinem CSS mehrere Sticky-Elemente übereinander stapeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!