Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So implementieren Sie CSS-Div, das sich nicht mit der Bildlaufleiste bewegt

藏色散人
Freigeben: 2023-01-04 09:37:57
Original
5791 Leute haben es durchsucht

So implementieren Sie ein CSS-Div, das sich nicht mit der Bildlaufleiste bewegt: Erstellen Sie zunächst eine Beispieldatei. Setzen Sie dann den CSS-Attributstil des Div auf „position:fixed;“, um zu verhindern, dass sich das Div mit der Bildlaufleiste bewegt.

So implementieren Sie CSS-Div, das sich nicht mit der Bildlaufleiste bewegt

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „CSS-Video-Tutorial

Div mit CSS-Einstellungen nicht mit der Bildlaufleiste verschieben

Fixieren Sie einen Inhalt an einer bestimmten Position und positionieren Sie ihn relativ zum Browserfenster. Hier wird eine feste Positionierung verwendet.

Die Positionierung umfasst normalerweise die absolute Positionierung und die relative Positionierung. Diese erfolgen relativ zu den Blockelementen im Textkörper. Wenn Sie jedoch möchten, dass sich ein bestimmter Inhalt an einer bestimmten Position befindet, befindet er sich immer noch im Browser, unabhängig davon, wohin die Bildlaufleiste verschoben wird Fenster, daher muss „fixed“ verwendet werden.

Das feste Elementfeld verhält sich so, als würde man die Position auf „absolut“ setzen, aber sein enthaltender Block ist das Ansichtsfenster selbst. Stimmen Sie den Werten „links“, „oben“, „rechts“ und „unten“ zu. Die Verwendung ähnelt der von „absolut“.

Beispiel:

<div style="width:100px; height:100px; border:1px solid red; position:fixed; left:300px; top:300px;">
    固定的内容
</div>
Nach dem Login kopieren

Das Div oben hat eine Breite von 100, eine Höhe von 100 und ist 300 Pixel von der oberen linken Ecke des Browsers entfernt. Es scrollt nicht, während die Seite scrollt.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie CSS-Div, das sich nicht mit der Bildlaufleiste bewegt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage