Eine kleine Einführung in die Verwendung der Position in HTML

Ich habe gestern gerade etwas HTML gelernt und konnte es kaum erwarten, eine Suchleiste auf JD.com zu erstellen. Ich habe es geschafft, aber als ich den Einkaufswagen überprüfte, wusste ich nicht, wie ich eine darauf angezeigte Nummer hinzufügen sollte. Wenn ich möchte, dass sich die Nummer mit dem Einkaufswagen bewegt, muss ich sie zusammen positionieren. Für die Positionierung ist definitiv eine Position erforderlich. Stellen Sie zuerst die Position des Div mit der Nummer auf absolut ein, was mir ein Gefühl der Schichtung vermittelt. Da das übergeordnete Tag der Position der Nummer body ist, kann ich auch oben und links mit dem Einkaufswagen auf die gewünschte Position setzen. Wenn ich jedoch den Rand des Einkaufswagens ändere, können sich die beiden nicht zusammen bewegen, daher stelle ich die Position des Einkaufswagens auf relativ ein, sodass das übergeordnete Tag der Position der Nummer zum Einkaufswagen wird. Egal, wie der Rand des Einkaufswagens angepasst wird, die Nummer wird sich mit ihm bewegen ...

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf>
<title>tag03.html</title>
<style type="text/css">
/*Schreiben Sie zuerst ein Positions-Div*/
#Auto{
Breite: 150px; Höhe: 30px;
Hintergrund: #999999;
Farbe: weiß; Textausrichtung: zentriert;
Zeilenhöhe: 30px; Rand: 232px 300px;
Rand: 1px, durchgehend schwarz; Position: relativ;
}
#num{
Breite: 20px; Höhe: 20px; Hintergrund: rot;
Farbe: weiß; Textausrichtung: zentriert;
Zeilenhöhe: 20px; Position: absolut;
oben: -15px; links: 25px;
}
</Stil>
</Kopf>
<Text>
<div id="Auto">
Zum Bezahlen in den Warenkorb gehen
<div id="Nummer">0</div>
</div>
</body>
</html>

<<: Details zu Makrotasks und Mikrotasks in JavaScript

>>: Das Problem der Einführung der angegebenen Schriftart @font-face in CSS, um mit verschiedenen Browsern kompatibel zu sein

Idea stellt Remote-Docker bereit und konfiguriert die Datei

Eine kleine Einführung in die Verwendung der Position in HTML

Idea stellt Remote-Docker bereit und konfiguriert die Datei

So verwenden Sie vue3+TypeScript+vue-router

HTML-Versionsdeklaration DOCTYPE-Tag

MySQL Serie 14 MySQL Hochverfügbarkeitsimplementierung

JavaScript-Grundlagen: Fehlererfassungsmechanismus

So verwenden Sie den temporären MySQL 5.7-Tablespace, um Fallstricke zu vermeiden

So fragen Sie Bilder in einem privaten Register ab oder erhalten sie

Ausnahmefehler beim Packen von Webpack-Dateien

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.25

Die drei neuen Indizes, die in MySQL 8 hinzugefügt wurden, sind versteckt, absteigend und Funktionen

Artikel empfehlen

JavaScript zum Implementieren des Click-to-Switch-Bestätigungscodes und der Bestätigung

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18

So verwenden Sie die HTML 5 Drag & Drop-API in Vue

MySQL 5.5.56-Version (Installation von Binärpaketen) benutzerdefinierter Installationspfad-Schrittdatensatz

So implementieren Sie die @person-Funktion über Vue

Grafisches Tutorial zur Installation der komprimierten Version von MySQL 8.0.15

Schritte zum Erstellen einer Linux-Umgebung unter Windows mit VMWare (Bild und Text)

Docker-Kern und spezifische Verwendung der Installation

Detaillierte Erläuterung der Verwendung von Docker Commit

vue3.0 + echarts realisiert dreidimensionales Säulendiagramm

JavaScript zur Implementierung eines einfachen Web-Rechners

So installieren Sie Android x86 in einer virtuellen VMware-Maschine

Mehrere Methoden zum Bereitstellen mehrerer Front-End-Projekte mit nginx

Zusammenfassung gängiger Fehler beim Entwurf von MySQL-Tabellen