Einführung in die Verwendung des in CSS festgelegten Positionierungsattributs position

Dieser Artikel stellt hauptsächlich die Verwendung des in CSS festgelegten Positionierungsattributs vor. Jetzt kann ich es mit Ihnen teilen.

Wenn ein Div möchte Bei der Positionierung ist unsere erste Reaktion das Positionsattribut, das auch absolute, relative und feste Werte enthält. Unten finden Sie ein gutes Beispiel 🎜> Wenn ein p in HTML positioniert werden möchte, ist unsere erste Reaktion das Positionsattribut. Zusätzlich zum Standardwert verfügt das Positionsattribut auch über absolute, relative und feste Werte. Wenn es auf „Fest“ eingestellt ist, können Sie es relativ zum Körper positionieren, indem Sie die Werte „links“, „rechts“, „oben“ und „unten“ festlegen.

Code:

.my-fiexd{ 
position:fixed; 
height:40px; 
width:40px; 
background-color:red; 
border:0px; 
}

Aber wenn ein p beim Scrollen der Bildlaufleiste auf fest eingestellt ist (oben, viele Menüs tun dies), kann ein kleines Phänomen auftreten (man kann sagen, dass es ein Fehler ist). . Ich werde nicht auf den spezifischen Code eingehen, sondern nur über das Phänomen und die Lösungen sprechen.

Wenn eine Seite mit einer Höhe von 100 Pixel ein p mit der ID my-fixed hat, beträgt die Höhe von my-fixed 20 Pixel, und wenn die Bildlaufleiste auf 30 Pixel scrollt, wird my-fixed mit dem Attribut fiexd hinzugefügt Dann wird my -fixed zu diesem Zeitpunkt von der Seite getrennt und die entsprechende Seitenhöhe beträgt 80 Pixel. Möglicherweise beträgt die maximale Höhe, über die die Bildlaufleiste scrollen kann, weniger als 30 Pixel Zu diesem Zeitpunkt fügt my-fixed weiterhin hinzu und es flackert ständig zwischen dem Nicht-Hinzufügen von Fixed und schließlich wird My-Fixed nicht repariert.

Die Lösung besteht darin, der äußeren Ebene von my-fixed ein p hinzuzufügen und die gleiche Höhe wie my-fixed festzulegen, damit beim Trennen von my-fixed die Seitenhöhe nicht verringert wird und das Flackern auftritt wird eliminiert.

ps: Dies ist das erste Mal, dass ich einen Blog schreibe, aber die allgemeine Bedeutung sollte dennoch stimmen , wenn jemand auf das gleiche Problem stößt und eine bessere Lösung hat, teilen Sie mir bitte die Lösung mit.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist Achtung auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Vertikale Sekundärnavigation implementiert durch CSS3

So verwenden Sie das Attribut „position:fixed“, um ein DIV zu zentrieren

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung des in CSS festgelegten Positionierungsattributs position. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!