Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

DDD
Freigeben: 2024-11-01 02:00:02
Original
908 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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage