Einige Kenntnisse über die absolute und relative Positionierung von Seitenelementen

Ab heute werde ich regelmäßig kleine Wissenspunkte organisieren. Einige davon sind vielleicht sehr einfach, aber sie sollten alle nützlich sein.

In Bezug auf die absolute und relative Positionierung von div ist dies etwas, das jedes Front-End-IT-Personal verwenden wird. Die sogenannte absolute Positionierung bedeutet, dass dieses Ding einfach da ist und meine Position unverändert bleibt, egal wie sich andere Dinge bewegen. Um es nett auszudrücken, nennt man das Integrität, aber um es unverblümt auszudrücken, nennt man es Schurkerei. Natürlich wird für die relative Positionierung im Allgemeinen die absolute Positionierung verwendet. Das ist vergleichbar mit einer Bande, die Schutzgelder eintreibt. Dieser Bereich unterliegt meiner Gerichtsbarkeit, daher gelten die Positionen der Elemente in mir ausschließlich für mich und haben nichts mit der Außenwelt zu tun. Nachdem wir über die absolute Positionierung gesprochen haben, sprechen wir über die relative Positionierung. Elemente mit diesem Attribut sind sehr charakterlos. Ich gehe dorthin, wohin der Anführer geht, und drehe mich immer um den Anführer. So, genug geredet, kommen wir zurück zum Thema.

Manchmal müssen wir einer Ebene etwas hinzufügen, aber das ist in einer Webseite nicht so einfach wie in PS. Wir müssen ein Div (oder einen anderen Container) schreiben, um den Inhalt unserer Ebene zu speichern, es dann in die Ebene (Div) einfügen, wo wir es platzieren möchten, die Position im Stilattribut unserer übergeordneten Ebene auf absolut setzen und schließlich die Position des Stils unseres neu erstellten Div auf relativ setzen. Auf diese Weise wird meine Ebene über der übergeordneten Ebene platziert. Die Unterebene verfügt über die Eigenschaften oben, unten, links und rechts und wir können unsere Elemente nach oben, unten, links und rechts positionieren.

Beachten Sie, dass Ihre relative Positionierung relativ zur gesamten Seite ist, wenn Sie keine Ebene für die absolute Positionierung definieren. Axure RP, eine häufig verwendete Prototyping-Software, verwendet eine globale relative Positionierung. Tatsächlich ist Axure RP sehr einfach zu verwenden.

Das Wetter wird kühler, also halten Sie sich bitte warm.

<<: Implementierung von verschiebbaren Zeilen und Spalten sowie Auswahlspaltenkomponenten basierend auf der el-table-Kapselung

>>: Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Kombinationsselektoren spielen

Mehrere gängige Möglichkeiten zum Bereitstellen von Tomcat-Projekten [getestet]

Einige Kenntnisse über die absolute und relative Positionierung von Seitenelementen

Mehrere gängige Möglichkeiten zum Bereitstellen von Tomcat-Projekten [getestet]

Vue implementiert Akkordeoneffekt

Mehrere Möglichkeiten zum einfachen Durchlaufen von Objekteigenschaften in JS

Implementierung der Formatierung von Partitionen und der Einbindung in Centos7

Entmystifizierung des HTML 5-Arbeitsentwurfs

Zwei Möglichkeiten zur Installation des Linux-Subsystems in Windows 10 (mit Bildern und Text)

Versuchen Sie Docker+Nginx, um die Single-Page-Anwendungsmethode bereitzustellen

Mobile Frontend-Anpassungslösung (Zusammenfassung)

Verwenden Sie Xshell, um eine Verbindung zur virtuellen Linux-Maschine auf VMware herzustellen (grafische Schritte)

Vue+thinkphp5.1+axios zum Realisieren des Datei-Uploads

Artikel empfehlen

20 CSS-Codierungstipps für mehr Effizienz (sortiert)

IP-Whitelist für die Linux-Serverkonfiguration zum Verhindern von Remote-Anmeldungen und Port-Offenlegung

Neue interaktive Erfahrungen mit Online-Werbung bei der Website-Erstellung (grafisches Tutorial)

Vollständiger Prozessdatensatz zur Fehlerbehebung bei MySQL DeadLock

JavaScript implementiert das mobile Puzzlespiel mit neun Rastern

So deinstallieren Sie MySQL sauber (getestet und effektiv)

MySQL verwendet frm-Dateien und ibd-Dateien, um Tabellendaten wiederherzustellen

So verwenden Sie VirtualBox zum Simulieren eines Linux-Clusters

Schauen wir uns einige leistungsstarke Operatoren in JavaScript an

Win10 Installation von MySQL 5.7 MSI-Version des Tutorials mit Bildern und Text

Bei der kostenlosen Installationsversion von MySQL 5.7.19 sind Fallstricke aufgetreten (Sammlung)

Scrollen von HTML-Marquee-Zeichenfragmenten

Eine kurze Diskussion über die Unterschiede zwischen den drei wichtigsten Datenbanken: Mysql, SqlServer und Oracle

Implementierungsbeispiel für die Docker-Bereitstellung von Front-End- und Back-End-Trennprojekten

SQL-Implementierung von LeetCode (177. N-höchstes Gehalt)