Detaillierte Erklärung der Ursachen und Lösungen von Konflikten zwischen Filtern und festen

Detaillierte Erklärung der Ursachen und Lösungen von Konflikten zwischen Filtern und festen

Problembeschreibung

Wenn filter im body verwendet wird, führt dies zu einer falschen Positionierung des fixed Elements, d. h. es wird nicht mehr relativ zum viewport positioniert, sondern relativ zur gesamten Webseite ( body ).

<html>
  <Kopf>
    <title>CSS-Filterproblem</title>
    <Stil>
      Körper {
        Höhe: 600px;
        Hintergrund: rot;
        Filter: Graustufen (1); /* Tastencode*/
      }

      .behoben {
        Farbe: gelb;
        Position: fest;
        oben: 0;
        rechts: 0;
      }
    </Stil>
  </Kopf>
  <Text>
    <div class="fixed">festes Element</div>
  </body>
</html>

Das Effektdiagramm ist wie folgt: Beachten Sie, dass fixed item in der oberen rechten Ecke nicht mehr relativ zur oberen rechten Ecke der Bildschirmansicht positioniert ist.

Lösung

Der Grund für dieses Problem ist: Wenn filter nicht none ist und das Element oder sein untergeordnetes Element absolute oder fixed Attribut hat, wird ein neuer enthaltener Block/Container dafür erstellt, was die Positionierung des absolute oder fixed Elements ändert (das heißt, das positionierte <parent>-Element absolute oder fixed Elements wird in das neu erstellte Element geändert).

Wenn im obigen Beispiel filter im body -Tag verwendet wird, generiert filter einen neuen enthaltenden Block mit derselben Position und Größe wie body . Anschließend wird fixed Element entsprechend diesem enthaltenden Block positioniert. Wir sehen also, dass fixed Element seine ursprünglichen Eigenschaften verliert.

Wenn der Filter jedoch auf das Stammelement (also das HTML-Tag) einwirkt, wird kein neuer enthaltener Block für die absoluten oder festen untergeordneten Elemente erstellt.

Referenz: https://drafts.fxtf.org/filter-effects/#FilterProperty

Die Lösung ist also sehr einfach: Setzen Sie einfach das filter in den html -Tag

html {
	Filter: Graustufen(1);
}

Erweiterungen

1. position: fixed

Wenn ein Element das fixed Attribut enthält, erstellt das Bildschirm viewport einen containing block dafür, dessen Größe der Größe viewport entspricht, und das fixed Element wird dann basierend auf dem enthaltenen Block positioniert. Normalerweise sagen wir, dass fixed Elemente relativ zum viewport positioniert sind.

Darüber hinaus erstellt fixed Attribut einen neuen Stapelkontext. Wenn transform , perspective oder filter des Vorgängerelements ungleich „ none ist, wird der Container vom Ansichtsfenster zu diesem Vorgängerelement geändert.

Referenz: https://www.w3.org/TR/css-position-3/#fixed-pos

2. HTML -Tags und body Tags

Den Unterschied zwischen den beiden finden Sie in diesem Blog: http://phrogz.net/css/htmlvsbody.html

ps: HTML-Element ist max. (Bildschirmhöhe <Ansichtsfensterhöhe>, interne Elementhöhe <Body-Elementhöhe>)

Damit ist dieser Artikel über die Ursachen und Lösungen für Konflikte zwischen Filtern und Fixpunkten abgeschlossen. Weitere Informationen zu Konflikten zwischen Filtern und Fixpunkten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Empfohlene Tipps für Web-Frontend-Ingenieure

>>:  Eine detaillierte Einführung in die Grundlagen des Linux-Scriptings

Artikel empfehlen

Nginx-Lastausgleichsalgorithmus und Failover-Analyse

Überblick Der Lastenausgleich von Nginx bietet Up...

Einführung in die Verwendung des offiziellen MySQL-Leistungstesttools mysqlslap

Inhaltsverzeichnis Einführung Anweisungen Tatsäch...

Eine kurze Analyse der Unterschiede zwischen „:=“ und „=“ in MySQL

= Nur beim Setzen und Aktualisieren wirkt es wie ...

So verkleinern Sie das Stammverzeichnis des XFS-Partitionsformats in Linux

Inhaltsverzeichnis Vorwort Systemumgebung Aktuell...

Beispiel für automatischen Stoppeffekt nach Text-Scrollen

Die Wirkung ist ganz einfach: Kopieren Sie einfach...

Implementierung des Durchklickens des transparenten Bereichs unregelmäßiger Formen in Electron

Inhaltsverzeichnis Implementierung einer unregelm...

Natives JS zur Implementierung eines atmenden Karussells

Heute zeige ich Ihnen ein mit nativem JS implemen...

Lösen Sie das Hierarchieproblem des Z-Index des untergeordneten Elements und der Geschwisterknoten des übergeordneten Elements in CSS

1. Die Entstehung des Problems Habe eine flache L...

Detaillierte Analyse von HTML-Tabellen-Tags und damit verbundenen Zeilenumbruchproblemen

Was ist eine Tabelle? Eine Tabelle ist eine HTML-...

So verwenden Sie die Vue3-Komponente zum asynchronen Laden von Daten Suspense

Inhaltsverzeichnis Vorwort Komponenten erstellen ...

Einführung in Netzwerktreiber für Linux-Geräte

Kabelgebundenes Netzwerk: Ethernet Drahtloses Net...

ReactHooks Batch-Update-Status und Abrufen von Routenparametern Beispielanalyse

Inhaltsverzeichnis 1. So führen Sie stapelweise U...

jQuery verwendet das Canvas-Tag, um den Bestätigungscode zu zeichnen

Das <canvas>-Element ist für clientseitige ...

Häufige Fehler beim Schreiben von HTML-Tags

Wir sollten besser aufpassen, denn die HTML-Poliz...

Fallstricke und Lösungen bei der MySQL-Zeitstempelvergleichsabfrage

Inhaltsverzeichnis Fallstricke bei Zeitstempelver...