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

So lösen Sie das Problem, dass das Projekt in Eclipse nicht zu Tomcat hinzugefügt werden kann

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

So lösen Sie das Problem, dass das Projekt in Eclipse nicht zu Tomcat hinzugefügt werden kann

CentOS 7-Konfiguration Tomcat9+MySQL-Lösung

Detaillierte Analyse der Kompilierung und Installation von vsFTP 3.0.3

Lösung für den Initialisierungsfehler bei der Installation von mysql5.7 aus einem RPM-Paket in centos6.5

Linux-Plattform MySQL ermöglicht Remote-Login

Detaillierte Erläuterung der drei Methoden zum Abfangen von JS-Zeichenfolgen

So zeigen Sie den Rahmen an, wenn td leer ist

Verwendung des Linux-Befehls ifconfig

Schiebemenü mit CSS3 implementiert

Detaillierte Erläuterung des Installationsprozesses von msf auf einem Linux-System

Artikel empfehlen

Beispielanalyse der drei Verbindungsmethoden für virtuelle VMware-Maschinen

Ubuntu Docker-Installation in VMware (Containererstellung)

HTTP-Statuscodes

Detaillierte Erklärung der Verwendung des Bash-Befehls

Schritte zur Methode „Mysql-Abfragedatenbankkapazität“

Detaillierte Erläuterung der Keep-Alive- und Unified-Routing-Verarbeitung von Vue3-Cache-Seiten

So erklären Sie TypeScript-Generika auf einfache Weise

Linux-Fernsteuerungsprogramm für Windows-System (drei Methoden)

Eine kurze Beschreibung der Beziehung zwischen k8s und Docker

So ermitteln Sie die Ausführungszeit eines Befehls oder Prozesses in Linux

MySQL-Optimierungslösung: Aktivieren Sie das Protokoll für langsame Abfragen

MySQL-Grundlagen in 1 Stunde

JavaScript zum Erzielen eines Zeitbereichseffekts

Implementierung von Platzhaltern und Escape-Zeichen in der Linux-Befehlszeile

So verwenden Sie Node.js, um festzustellen, ob ein PNG-Bild transparente Pixel hat