Beispielcode zur Implementierung einer DIV-Aufhängung mit reinem CSS (feste Position)

Der DIV-Schwebeeffekt (feste Position) wird ausschließlich mit CSS implementiert und ist mit häufig verwendeten Browsern kompatibel: IE8, 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, The World usw. Die Wirkung ist wie folgt:

Implementierungscode:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1" />
<title>Beispiel für eine DIV-Aufhängung – reine CSS-Implementierung</title>
<style type="text/css">
/*Stellen Sie die Höhe ein, Sie können nach oben und unten scrollen*/
Körper {
Höhe: 1800px;
Hintergrund:#dddddd;
}

/*allgemeiner div-Stil*/
div{
Hintergrund: #1a59b7;
Farbe: #ffffff;
Überlauf: versteckt;
Z-Index: 9999;
Position: fest;
Polsterung: 5px;
Textausrichtung: zentriert;
Breite: 175px;
Höhe: 22px;
Rahmen unten links – Radius: 4px;
Rahmen unten rechts – Radius: 4px;
Rahmen oben links – Radius: 4px;
Rahmen oben rechts – Radius: 4px;
}

/*obere rechte Ecke*/
div.rechts_oben{
rechts: 10px;
oben: 10px;
}

/*untere rechte Ecke*/
div.rechts_unten{
rechts: 10px;
unten: 10px;
}

/*Bildschirmmitte*/
div.center_{
rechts: 45%;
oben: 50 %;
}

/*obere linke Ecke*/
div.links_oben{
links: 10px;
oben: 10px;
}

/*linke untere Ecke*/
div.left_bottom{
links: 10px;
unten: 10px;
}
</Stil>
</Kopf>
<Text>
<div class="right_top">Ich bin das Div, das in der oberen rechten Ecke schwebt</div>
<div class="right_bottom"> Ich bin das Div, das in der unteren rechten Ecke schwebt</div>
<div class="center_">Ich bin das Div, das in der Mitte des Bildschirms schwebt</div>
<div class="left_top">Ich bin das Div, das in der oberen linken Ecke hängt</div>
<div class="left_bottom"> Ich bin das Div, das in der unteren linken Ecke hängt.</div>
</body>
</html>

Damit ist dieser Artikel über Beispielcode zur Implementierung von DIV-Suspendierung mit reinem CSS (feste Position) abgeschlossen. Weitere relevante CSS-DIV-Suspendierungsinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Zwei Möglichkeiten zum Löschen von Floats in HTML

>>: Detaillierte Erklärung der Destrukturierungszuweisung in JavaScript

Detaillierte Erläuterung der Linux-Dateiberechtigungen und Befehle zur Gruppenänderung

Beispielcode zur Implementierung einer DIV-Aufhängung mit reinem CSS (feste Position)

Detaillierte Erläuterung der Linux-Dateiberechtigungen und Befehle zur Gruppenänderung

MySQL partitioniert vorhandene Tabellen in der Datentabelle

MySQL Master-Slave-Synchronisationsmechanismus und Tracking-Prozess für Synchronisationsverzögerungsprobleme

CentOS7 64-Bit-Installation MySQL Grafik-Tutorial

Lösung für das Problem „Fehler beim Konfigurieren von IDEA für die Verbindung zur MySQL-Datenbank“

Erläuterung zur Optimierung der Tomcat+MySQL-Konfiguration mit hoher Parallelität

Einige Vorschläge für HTML-Anfänger und Neulinge, Experten können sie ignorieren

4 Möglichkeiten, mit CSS ein zweispaltiges Layout mit fester linker Spalte und adaptiver rechter Spalte zu erreichen

JavaScript zum Erzielen eines benutzerdefinierten Bildlaufleisteneffekts

So verwenden Sie die Debouce-Anti-Shake-Funktion in Vue

Artikel empfehlen

Zusammenfassung der CSS-Farbverlaufseffekte (linearer Farbverlauf und radialer Farbverlauf)

So aktualisieren Sie CentOS7 auf CentOS8 (detaillierte Schritte)

Lösung für das Problem, dass eine Linux-Änderung der MySQL-Konfiguration nicht wirksam wird

Beispielcode zum Anzeigen von Erinnerungspunkten in der oberen linken oder oberen rechten Ecke mithilfe von CSS3

Webdesign-Dimensionen und Regeln für die Werbegestaltung auf Webseiten

Vue-Konfigurationsdetails für mehrere Seiten

Konfliktlösung bei gleichzeitiger Verwendung von Laufschrift und Flash auf einer Seite

Implementierung der kontinuierlichen Integration von Jenkins+Docker

Lösung für das Problem, dass nach einem Neustart von Ubuntu in VMWare kein Zugriff auf das Internet möglich ist

Vue-Praxis zur Vermeidung mehrfacher Klicks

Eine kurze Einführung in die Verwendung des Dezimaltyps in MySQL

Probleme bei der Installation von Python3 und Pip in Ubuntu in Docker

Implementierung zum Entfernen überlappender Zeiten und Berechnen der Zeitdifferenz in MySQL

So beheben Sie den MySQL-FEHLER 1045 (28000) - Zugriff wegen Benutzer verweigert

Diskussion über CSS-Stilpriorität und kaskadierende Reihenfolge