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

Erstellen und Verwenden von Docker-Datenvolumencontainern

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

Erstellen und Verwenden von Docker-Datenvolumencontainern

Eine kurze Einführung in MySQL-Funktionen

Analyse und Lösung eines Fehlalarmproblems bei der langsamen MySQL-Protokollüberwachung

Richtige Verwendung der Vue-Funktion Anti-Shake und Throttling

So stellen Sie über Navicat eine Remoteverbindung zu MySQL her

Eine kurze Analyse des Reaktionsprinzips und der Unterschiede von Vue2.0/3.0

Zusammenfassung häufiger Probleme und Lösungen in Vue (empfohlen)

Installieren Sie MySQL 5.7.18 mit dem RPM-Paket unter CentOS 7

Tipps zur Optimierung von MySQL SQL-Anweisungen

js zum Implementieren von Details im Datei-Upload-Stil

Artikel empfehlen

Detaillierte Erklärung der Verwendung des MySQL-Paradigmas

Das WeChat-Applet implementiert einen einfachen Chatroom

Docker löscht private Bibliotheksbilder vollständig

Detaillierte Erklärung der numerischen Trennzeichen von TS und strengere Klassenattributprüfungen

Wann ist die Verwendung von dl, dt und dd sinnvoll?

JavaScript klickt auf die Schaltfläche, um einen 4-stelligen zufälligen Bestätigungscode zu generieren

Implementierungsmethode für die bidirektionale Bindung von Vue-Daten

Ein Artikel zum schnellen Verständnis des Lebenszyklus und der Hook-Funktionen von Angular und Ionic

Einführung in das MySql-Cache-Abfrageprinzip sowie in die Cache-Überwachung und Indexüberwachung

Installieren Sie den NVIDIA-Grafiktreiber unter Ubuntu (einfache Installationsmethode).

Einführung in die Verwendung des http-equiv-Attributs im Meta-Tag

Detaillierte Erklärung zur korrekten Verwendung der Zählfunktion in MySQL

Schöner Kontrollkästchenstil (Feld für Mehrfachauswahl), perfekt kompatibel mit IE8/9/10, FF usw.

Implementierung der MySQL8.0.11-Datenverzeichnismigration

React + ts realisiert den sekundären Verknüpfungseffekt