Detaillierte Erklärung der Verwendung von 5 verschiedenen Werten der CSS-Position
|
Die Position-Eigenschaft Die Positionseigenschaft gibt den Typ der Positionierungsmethode (statisch, relativ, fest, absolut oder klebrig) an, die für ein Element verwendet werden soll. Es gibt fünf verschiedene Werte: •statisch Die Positionierung des Elements erfolgt dann über die Eigenschaften oben, unten, links und rechts. Diese Eigenschaften haben jedoch keine Auswirkung, wenn die Positionseigenschaft nicht zuerst festgelegt wird. Je nach Positionswert funktionieren sie unterschiedlich. Position: statisch; Standardmäßig werden HTML-Elemente statisch positioniert. Statisch positionierte Elemente werden von den Eigenschaften oben, unten, links und rechts nicht beeinflusst. Ein Element mit der Position „position:static“ wird nicht auf eine besondere Weise positioniert. Es wird immer entsprechend dem normalen Seitenfluss positioniert: Dieses <div>-Element hat die Position: static; <!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel>css</Titel>
<Stil>
div.static {
Position: statisch;
Rand: 3px durchgezogen #73AD21;
}
</Stil>
</Kopf>
<Text>
<h2>Position: statisch;</h2>
<p>Ein position:static-Element hat keine spezielle Positionierung; es wird immer entsprechend dem normalen Seitenfluss positioniert:</p>
<div Klasse="statisch">
Die Position dieses Div-Elements ist: statisch;
</div>
</body>
</html>Position: relativ; Ein Element mit der Position: relativ; wird relativ zu seiner normalen Position positioniert. Durch Festlegen der oberen, unteren, linken und rechten Eigenschaften eines relativ positionierten Elements wird es von seiner normalen Position weg verschoben. Andere Inhalte werden nicht angepasst, um etwaige vom Element hinterlassene Leerzeichen auszufüllen. Dieses <div>-Element hat die Position: relativ; <!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel>css</Titel>
<Stil>
div.relative {
Position: relativ;
links: 30px;
Rand: 3px durchgezogen #73AD21;
}
</Stil>
</Kopf>
<Text>
<h2>Position: relativ;</h2>
<p>Ein Element mit position:relative; relativ zu seiner normalen Position positioniert:</p>
<div Klasse="relativ">
Dieses Div-Element hat die Position: relativ;
</div>
</body>
</html>Position: fest; Das Element mit position:fixed; wird relativ zum Ansichtsfenster positioniert, was bedeutet, dass es immer an der gleichen Position bleibt, auch wenn die Seite gescrollt wird. Die Eigenschaften oben, unten, links und rechts werden zum Positionieren eines Elements verwendet. Feste Elemente hinterlassen keine Lücken auf der Seite, wo sie normalerweise platziert wären. Beachten Sie das feste Element in der unteren rechten Ecke der Seite. <!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>CSS-Tutorial (jc2182.com)</title>
<Stil>
div.fest {
Position: fest;
unten: 0;
rechts: 0;
Breite: 300px;
Rand: 3px durchgezogen #73AD21;
}
</Stil>
</Kopf>
<Text>
<h2>Position:fest;</h2>
<p>position:fixed; wird relativ zum Ansichtsfenster positioniert, was bedeutet, dass es immer an der gleichen Position bleibt, auch wenn die Seite gescrollt wird:</p>
<div Klasse="behoben">
Dieses Div-Element hat die Position: fest;
</div>
</body>
</html>Position: absolut; Ein Element mit der Position „absolute“ wird relativ zum nächstgelegenen positionierten Vorgänger positioniert (und nicht relativ zum Ansichtsfenster wie „fixed“). Wenn das absolut positionierte Element jedoch keinen positionierten Vorgänger hat, verwendet es den Dokumenttext und bewegt sich mit dem Seiten-Scrollen. HINWEIS: Die Position eines „positionierten“ Elements ist jedes Element außer einem statischen. <!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>CSS-Tutorial (jc2182.com)</title>
<Stil>
div.relative {
Position: relativ;
Breite: 400px;
Höhe: 200px;
Rand: 3px durchgezogen #73AD21;
}
div.absolute {
Position: absolut;
oben: 80px;
rechts: 0;
Breite: 200px;
Höhe: 100px;
Rand: 3px durchgezogen #73AD21;
}
</Stil>
</Kopf>
<Text>
<h2>Position: absolut;</h2>
<p>Ein Element mit der Position „absolute“ wird relativ zum nächstgelegenen positionierten Vorgänger positioniert (und nicht relativ zum Ansichtsfenster, wie bei „fixiert“):</p>
<div class="relative">Dieses Div-Element hat die Position: relativ;
<div class="absolute">Dieses Div-Element hat die Position: absolute;</div>
</div>
</body>
</html>Position: klebrig; position:sticky; positioniert das Element basierend auf der Scrollposition des Benutzers. Das Sticky-Element wechselt je nach Scrollposition zwischen relativ und fixiert. Es wird relativ positioniert, bis die angegebene Versatzposition im Ansichtsfenster erreicht ist – dann „klebt“ es an Ort und Stelle (wie Position: fest). Hinweis: Internet Explorer, Edge 15 und früher unterstützen keine Sticky-Positionierung. Safari erfordert das Präfix -webkit- (siehe Beispiel unten). Damit die Fixierung funktioniert, müssen Sie außerdem mindestens eine der Optionen „Oben“, „Rechts“, „Unten“ oder „Links“ angeben. In diesem Beispiel sorgt top:0 dafür, dass das Sticky-Element oben auf der Seite haften bleibt, wenn Sie seine Scrollposition erreichen. <!DOCTYPE html>
<html>
<Kopf>
<Stil>
div.sticky {
Position: -WebKit-Sticky;
Position: klebrig;
oben: 0;
Polsterung: 5px;
Hintergrundfarbe: #cae8ca;
Rand: 2px durchgezogen #4CAF50;
}
</Stil>
</Kopf>
<Text>
<p>Versuchen Sie, innerhalb dieses Rahmens zu <b>scrollen</b>, um zu sehen, wie die klebrige Positionierung funktioniert. </p>
<p>Hinweis: IE/Edge15 und frühere Versionen unterstützen position: sticky; nicht. </p>
<div class="sticky">Ich bin klebrig!</div>
<div Stil="padding-bottom:2000px">
<p>In diesem Beispiel bleibt das Sticky-Element oben auf der Seite haften (oben: 0), wenn Sie seine Scrollposition erreichen. </p>
<p>Scrollen Sie nach oben, um die Klebrigkeit zu entfernen. </p>
<p>Ein bisschen Text, um das Scrollen zu ermöglichen. Ich war schon immer ein sehr guter Mensch und habe immer gedacht, dass ich das schaffen kann. Ich war schon immer sehr gut darin. Ich war schon immer sehr gut darin.</p>
<p>Ein bisschen Text, um das Scrollen zu ermöglichen. Ich war schon immer ein sehr guter Mensch und habe immer gedacht, dass ich das schaffen kann. Ich war schon immer sehr gut darin. Ich war schon immer sehr gut darin.</p>
<p>Ein bisschen Text, um das Scrollen zu ermöglichen. Ich war schon immer ein sehr guter Mensch und habe immer gedacht, dass ich das schaffen kann. Ich war schon immer sehr gut darin. Ich war schon immer sehr gut darin.</p>
<p>Ein bisschen Text, um das Scrollen zu ermöglichen. Ich war schon immer ein sehr guter Mensch und habe immer gedacht, dass ich das schaffen kann. Ich war schon immer sehr gut darin. Ich war schon immer sehr gut darin.</p>
</div>
</body>
</html>Erleben Sie es online und erreichen Sie seine Scrollposition Alle CSS-Positionierungseigenschaften
Zusammenfassen Oben wird die Verwendung von 5 verschiedenen Werten der CSS-Position beschrieben, die vom Editor eingeführt wurden. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
>>: So verbergen Sie die Grenze/Trennlinie zwischen Zellen in einer Tabelle
Artikel empfehlen
CSS3-Zeitleistenanimation
Ergebnisse erzielen html <h2>CSS3-Zeitleist...
Diagramm des Prozesses zur Implementierung eines Richtungsproxys durch Nginx
Dieser Artikel stellt hauptsächlich den Prozess d...
Umfassende Website-Bewertungslösung
<br />Manchmal werden Ihnen möglicherweise F...
Zwei Möglichkeiten zum Löschen von Tabellendaten in MySQL und ihre Unterschiede
Es gibt zwei Möglichkeiten, Daten in MySQL zu lös...
So lösen Sie das Zeichensatzproblem bei der Anmeldung bei Linux
Zeichensatzfehler treten immer auf Gebietsschema:...
react+antd.3x implementiert IP-Eingabefeld
In diesem Artikel wird der spezifische Code von r...
Erfahrung mit parallelen React-Funktionen (gleichzeitiger Front-End-Modus)
React ist eine Open-Source-JavaScript-Bibliothek,...
Die Qualitäten und Fähigkeiten, die ein Webdesigner haben sollte
Webdesign ist eine aufstrebende Randbranche, die n...
So legen Sie die Anzahl der MySQL-Verbindungen fest und ermitteln sie
Holen Sie sich die Anzahl der Verbindungen --- Ho...
So verwenden Sie die Vue-Timeline-Komponente
In diesem Artikelbeispiel wird der spezifische Im...
CSS3-Eigenschaft line-clamp steuert die Verwendung von Textzeilen
Beschreibung: Begrenzen Sie die Anzahl der Textze...
Detaillierte Erklärung der Stile in uni-app
Inhaltsverzeichnis Stile in uni-app Zusammenfasse...
MySQL-Datenmigration mit dem Befehl MySQLdump
Die Vorteile dieser Lösung liegen in der Einfachh...
Anwendungsszenarien und Entwurfsmethoden für MySQL-Tabellen- und Datenbank-Sharding
Viele Freunde haben in Foren und Nachrichtenberei...
React useEffect verstehen und verwenden
Inhaltsverzeichnis Vermeiden Sie sich wiederholen...