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

So verwenden Sie den JS-Code-Compiler Monaco

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

So verwenden Sie den JS-Code-Compiler Monaco

Eine kurze Analyse des Unterschieds zwischen FIND_IN_SET() und IN in MySQL

Tutorial zur Installation von MySQL 5.7.18 unter Windows 10

Detaillierte Schritte zur Konfiguration der Linux-Firewall (basierend auf der Yum-Warehouse-Konfiguration)

Zeichnen Sie den gesamten Prozess der MySQL-Master-Slave-Konfiguration basierend auf Linux auf

5 MySQL-GUI-Tools, die Ihnen bei der Datenbankverwaltung empfohlen werden

So schreiben Sie mit nodejs ein Tool zur Generierung von Entitätsklassen für Datentabellen für C#

Detaillierte Erklärung des JQuery-Selektors

So verwenden Sie HTML-CSS, um zu steuern, dass Div oder Tabellen an einer bestimmten Position fixiert werden

Die Verwendung und der Unterschied zwischen JavaScript-Pseudo-Array und Array

Artikel empfehlen

Vue hält den Benutzer angemeldet (verschiedene Token-Speichermethoden)

Fähigkeiten zur Seiten-Refaktorierung – Javascript, CSS

JavaScript imitiert Xiaomi-Karusselleffekt

Gemeinsame Eigenschaften des Framesets (Unterteilung von Frames und Fenstern)

Detaillierte Erläuterung des Garbage Collection-Mechanismus von JavaScript

Tutorial zur Installation und Konfiguration von MySQL 5.7

So installieren Sie mehrere mysql5.7.19 (tar.gz)-Dateien unter Linux

Teilen Sie 8 sehr nützliche CSS-Entwicklungstools

Docker stellt MySQL bereit, um Beispielcode für eine Remoteverbindung zu erreichen

So verwenden und begrenzen Sie Requisiten in React

Lösen Sie das Problem, dass Navicat beim Importieren der SQL-Datenbankdatenstruktur den Fehler datetime(0) meldet.

Zusammenfassung der neuen Verwendung von vi (vim) unter Linux

CSS3-Übergang zur Implementierung eines Benachrichtigungsnachrichtenkarussells

Einige Methoden zur Optimierung der Abfragegeschwindigkeit bei der Verarbeitung großer Datenmengen durch MySQL

Mehrere Möglichkeiten zum Löschen von Arrays in Vue (Zusammenfassung)