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

xtrabackup MySQL-Datenbank sichern und wiederherstellen

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

xtrabackup MySQL-Datenbank sichern und wiederherstellen

Schritte der MySQL-Methode zum Bestimmen, ob es sich um eine Teilmenge handelt

Die IE-Umgebung schreibt vor, dass die Div-Höhe größer sein muss als die Schrifthöhe

js zur Implementierung eines einfachen Bullet-Screen-Systems

MySQL-Methode zur Sperrensteuerung für Parallelität

So reduzieren Sie die Speicher- und CPU-Auslastung von Webseiten

Mini-Programm implementiert Listen-Countdown-Funktion

Beispiel einer langsamen MySQL-Abfrage

Detailliertes Tutorial zur Installation von Prometheus mit Docker

Beispiele für die Verwendung einer Link-Aktualisierungsseite und einer JS-Aktualisierungsseite

Artikel empfehlen

Verwenden Sie Docker, um mehrere PHP-Versionen auf dem Server auszuführen

Div deckt den Blitz ab. Die transparente Flash-Methode ermöglicht die Platzierung der DIV-Ebene auf dem Blitz.

Grafische Erklärung des Funktionsaufrufs der Protodatei in Vue

Detaillierte Erläuterung der Konfiguration des Samba-Ordnerfreigabeservers unter CentOS

MySQL-Sequenz AUTO_INCREMENT ausführliche Erklärung und Beispielcode

Lösen Sie das Problem, dass bei der Installation von MySQL unter Linux keine my.cnf-Datei in /etc vorhanden ist

JavaScript implementiert Klicken zum Ändern der Bildform (Transformationsanwendung)

Beispielcode zum Partitionieren und Formatieren einer Festplatte größer als 20 TB auf CentOS6

Detaillierte Erklärung zur JavaScript-Datenabflachung

JavaScript implementiert das Ändern der Farbe einer Webseite über einen Schieberegler

Mehrere Implementierungsmethoden sowie Vor- und Nachteile der SQL-Paging-Abfrage in MySQL

Verwenden Sie das NJS-Modul, um JS-Skripte in die Nginx-Konfiguration einzuführen

Mysql setzt Boolesche Typoperationen

Detaillierte Erklärung der API in Vue.js, die leicht zu übersehen ist

So erstellen Sie ein Dateisystem in einer Linux-Partition oder einem logischen Volume