CSS-Sticky-Positionierung Sticky ausführliche Erklärung

Ich habe eine gute Sache gefunden

Einführung: position:sticky ist ein neues Attribut der CSS-Positionierung Es wird gesagt, dass eine Kombination aus statischer (keine Positionierung) und fester Positionierung hauptsächlich zur Überwachung von Scroll-Ereignissen verwendet wird, wenn der Abstand zwischen einem Element und seinem übergeordneten Element die Anforderungen einer klebrigen Positionierung erreicht wie oben: 100px); Position: Der Sticky-Effekt entspricht zu diesem Zeitpunkt einer festen Positionierung, die auf die entsprechende Position fixiert ist

Bevor wir über die Sticky-Positionierung sprechen, sprechen wir über andere Positionspositionierungen,

absolut: Absolut positionierte Elemente generieren, werden im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

fixed: Generieren Sie ein Element mit fester Position, das relativ zum Browserfenster positioniert ist (der alte IE unterstützt dies nicht. Die Position des Elements wird durch „links“, „oben“ und „rechts“ angegeben). und „unten“-Attribute.

relativ: Erzeugt relativ positionierte Elemente, die relativ zu ihrer normalen Position positioniert sind, ohne den Dokumentenfluss zu unterbrechen.

statisch:

Standard, keine Positionierung, Element erscheint im normalen Dokumentfluss (oben, unten, links, rechts oder

Z-Index-Deklarationen werden ignoriert). inherit gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt werden soll.

Verwendung von klebrig:

#sticky-nav {
    position: sticky;
    top: 100px;
}

Position einstellen:klebrig und gleichzeitig eine von (oben, unten, rechts, links) geben

Nutzungsbedingungen:

Übergeordnete Elemente dürfen keine overflow:hidden- oder overflow:auto-Attribute haben.

Einer der vier Werte oben, unten, links und rechts muss angegeben werden, sonst erfolgt die Positionierung nur relativ

Die Höhe des übergeordneten Elements kann nicht angegeben werden niedriger als die Höhe des Sticky-Elements

Sticky-Elemente wirken nur innerhalb ihrer übergeordneten Elemente

Fallstricke im Projekt

Problembeschreibung:

In einem kleinen Programmentwicklungsprojekt wird die Tabs-Komponente verwendet, einschließlich der Tab-Leistenumschaltung; der Anzeigeinhalt umfasst Klickereignisse (oder Touch). Ereignisse); Klicktests in iOS- und PC-Browsern. Es ist normal, aber in Android-Telefonen! ! ! ! Oh mein Gott, es hat Klick gemacht! ! Außerdem habe ich versucht, den Klicksprung des Elements im Listencontainer zu entfernen, und festgestellt, dass der Klick des Tabulatorschalters nicht reagierte und das Ereignis verschwand! ! ! Legen Sie Haltepunkte fest, um die Richtung des Ereignisflusses anzuzeigen: Erste Ereigniserfassung -> Registerkarte „Zielknoten“ -> Ereignisblase ist tatsächlich bis zum Element in der Containerliste aufgetaucht. . . Es ist ein Albtraum. Grobe Projektstruktur:

HTML-Struktur:

<div class="service-wrap">
        <tab>这是tab切换</tab>
        <div class="list-container">
            <!--for循环有很多item-->
            <item></item>
            <item></item>
        </div>
    </div>

Lösung:

Fügen Sie bei Verwendung der Registerkarte der Komponentenbibliothek ein Div in die äußere Ebene ein, um dies zu verhindern Klicken Sie auf Penetration und den abnormalen Ablauf von Ereignissen oder (eine Methode, die die Symptome, aber nicht die Grundursache behandelt, je nach Geschäftsszenario)

Der Stil der Komponentenbibliothek kann nicht geändert werden, als Sticky wird verwendet Inline-Stil der Registerkartenkomponente, denn wenn ich diese Registerkarte direkt oben im Ansichtspunkt verwende, kann dies mit „Fest“ erreicht werden. Ich habe position:fixed !import außerhalb der aufrufenden Klasse festgelegt; die höchste Priorität des Stils überschreibt den Positionierungsstil in der Komponentenbibliothek, und alles ist normal.

Empfohlene Tutorials: „PHP-Tutorial“ „CSS-Tutorial“

Das obige ist der detaillierte Inhalt vonCSS-Sticky-Positionierung Sticky ausführliche Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!