CSS, was relative Positionierung ist
CSS-Relativpositionierung bedeutet, dass ein Element relativ zu seiner ursprünglichen Position positioniert wird und die verschobene Position keinen Einfluss auf das Layout anderer Elemente hat.
Das Merkmal der relativen Positionierung besteht darin, dass das Element weiterhin den ursprünglichen Platz einnimmt, ohne den Dokumentfluss zu unterbrechen oder das Layout anderer Elemente zu beeinträchtigen. Seine Positionierung wird relativ zum Element selbst berechnet und die Position des Elements kann über die Attribute oben, rechts, unten und links angegeben werden.
Hier ist ein konkretes Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: relative;
width: 100px;
height: 100px;
background-color: red;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>Im obigen Beispiel haben wir einen Container mit einer Breite von 300 Pixel und einer Höhe von 300 Pixel erstellt, mit einer Hintergrundfarbe von Hellgrau. Anschließend wird im Container ein Feld mit einer Breite von 100 Pixel und einer Höhe von 100 Pixel mit der Hintergrundfarbe Rot erstellt. Durch Hinzufügen des Attributs position: relative zur Box stellen wir die Box auf relative Positionierung ein.
Als nächstes verschieben wir das Feld um 50 Pixel nach unten und rechts, indem wir die Eigenschaften „oben: 50px“ und „links: 50px“ verwenden. Dadurch wird das Feld relativ zu seiner ursprünglichen Position nach unten und rechts verschoben.
Es ist zu beachten, dass die Bewegung der relativen Positionierung relativ zum Element selbst ist, d. h., obwohl sich die Box bewegt hat, nimmt sie immer noch die ursprüngliche Position ein. Andere Elemente sind davon nicht betroffen und es werden keine Layoutänderungen vorgenommen.
Zusammenfassend lässt sich sagen, dass die relative Positionierung eine Möglichkeit ist, relativ zur ursprünglichen Position zu positionieren. Die verschobene Position hat keinen Einfluss auf das Layout anderer Elemente. Die Position des Elements kann über die Attribute oben, rechts, unten und links gesteuert werden.
Das obige ist der detaillierte Inhalt vonCSS, was relative Positionierung ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Unterbricht die Sticky-Positionierung den Dokumentenfluss?
Feb 20, 2024 pm 05:24 PM
Unterbricht die Sticky-Positionierung den Dokumentenfluss? In der Webentwicklung ist das Layout ein sehr wichtiges Thema. Unter diesen ist die Positionierung eine der am häufigsten verwendeten Layouttechniken. In CSS gibt es drei gängige Positionierungsmethoden: statische Positionierung, relative Positionierung und absolute Positionierung. Zusätzlich zu diesen drei Positionierungsmethoden gibt es noch eine speziellere Positionierungsmethode, nämlich die Sticky-Positionierung. Unterbricht die Sticky-Positionierung also den Dokumentenfluss? Lassen Sie uns dies im Folgenden ausführlich besprechen und einige Codebeispiele bereitstellen, um das Verständnis zu erleichtern. Zuerst müssen wir verstehen, was Dokumentenfluss ist
Bottom-Attributsyntax in CSS
Feb 21, 2024 pm 03:30 PM
Syntax und Codebeispiele für das Bottom-Attribut in CSS In CSS wird das Bottom-Attribut verwendet, um den Abstand zwischen einem Element und dem Boden des Containers anzugeben. Es steuert die Position eines Elements relativ zum unteren Rand seines übergeordneten Elements. Die Syntax des unteren Attributs lautet wie folgt: element{bottom:value;} wobei element das Element darstellt, auf das der Stil angewendet werden soll, und value den festzulegenden unteren Wert darstellt. Der Wert kann ein bestimmter Längenwert sein, z. B. Pixel
So zentrieren Sie die Box in HTML5
Apr 05, 2024 pm 12:27 PM
Um die Box in HTML5 zu zentrieren, gibt es die folgenden Methoden: horizontale Zentrierung: text-align: centermargin: autodisplay: flexy-content: center; ); Position: absolut; links: 50 %; transformieren (-50 %; -50 %);
So positionieren Sie Elemente in CSS
Apr 26, 2024 am 10:24 AM
Es gibt vier Methoden zur Positionierung von CSS-Elementen: statische, relative, absolute und feste Positionierung. Die statische Positionierung ist die Standardeinstellung und das Element wird von den Positionierungsregeln nicht beeinflusst. Durch die relative Positionierung wird ein Element relativ zu sich selbst verschoben, ohne den Dokumentfluss zu beeinträchtigen. Bei der absoluten Positionierung wird ein Element aus dem Dokumentfluss entfernt und relativ zu seinen Vorgängerelementen positioniert. Durch die feste Positionierung wird ein Element relativ zum Ansichtsfenster positioniert, sodass es immer an derselben Position auf dem Bildschirm bleibt.
Detaillierte Erläuterung der Rotationspositionskodierung RoPE, die häufig in großen Sprachmodellen verwendet wird: Warum ist sie besser als die absolute oder relative Positionskodierung?
Apr 01, 2024 pm 08:19 PM
Die Transformer-Architektur ist seit der Veröffentlichung des Artikels „AttentionIsAllYouNeed“ im Jahr 2017 ein Eckpfeiler im Bereich der Verarbeitung natürlicher Sprache (NLP). Sein Design ist seit Jahren weitgehend unverändert geblieben, wobei das Jahr 2022 mit der Einführung von Rotary Position Encoding (RoPE) eine große Entwicklung auf diesem Gebiet markiert. Das Einbetten gedrehter Positionen ist die hochmoderne NLP-Positionseinbettungstechnik. Die meisten gängigen großen Sprachmodelle (wie Llama, Llama2, PaLM und CodeGen) verwenden es bereits. In diesem Artikel werfen wir einen detaillierten Blick darauf, was Rotationspositionskodierungen sind und wie sie die Vorteile der absoluten und relativen Positionseinbettungen geschickt kombinieren. Die Notwendigkeit einer Positionskodierung, um Ro zu verstehen
Was ist Layout-Layout?
Feb 24, 2024 pm 03:03 PM
Unter Layout versteht man eine im Webdesign verwendete Schriftsatzmethode, um Webseitenelemente nach bestimmten Regeln und Strukturen anzuordnen und anzuzeigen. Durch ein angemessenes Layout kann die Webseite schöner und übersichtlicher gestaltet werden und eine gute Benutzererfahrung erzielt werden. Bei der Front-End-Entwicklung stehen viele Layoutmethoden zur Auswahl, z. B. traditionelles Tabellenlayout, schwebendes Layout, Positionierungslayout usw. Mit der Förderung von HTML5 und CSS3 sind jedoch moderne responsive Layout-Technologien wie das Flexbox-Layout und das Grid-Layout entstanden
Was sind relative Positionierungstechnologien?
Oct 19, 2023 pm 05:42 PM
Zu den relativen Positionierungstechnologien gehören Funkentfernungsmessung, Sonar, Laserentfernungsmessung, Kameras, Trägheitsnavigation, Satellitennavigation, Innenpositionierung, Ultraschall, Infrarot, elektromagnetische Wellen, Bluetooth-Positionierung, Wi-Fi-Positionierung, Ultraschallentfernungsmessung, Infrarotentfernungsmessung und Laserentfernungsmessung visuelle Positionierung, RSSI-basierte Positionierung, TOA-basierte Positionierung, TDOA-basierte Positionierung, AOA-basierte Positionierung usw. Ausführliche Einführung: 1. Funkentfernung: Berechnen Sie die Entfernung durch Messung der Zeitdifferenz der Funkwellen vom Sendepunkt zum Empfangspunkt. 2. Sonartechnologie usw.
So richten Sie Textfelder in HTML aus
Mar 27, 2024 pm 04:33 PM
Methoden zum Ausrichten von Textfeldern in HTML: 1. Textausrichtung; 2. Verwenden Sie die Ausrichtung des Rasterlayouts; 4. Verwenden Sie die Rand- oder Positionsausrichtung.
