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
Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten
Inhaltsverzeichnis 1. Was ist ein Prototyp? 2. Pr...
Detaillierte Erklärung, wo das von Docker abgerufene Image gespeichert ist
20200804Nachtrag: Der Artikel könnte falsch sein....
Unverzichtbares Wissen für Vorstellungsgespräche und schriftliche Tests im Bereich Webentwicklung (Pflichtlektüre)
Der Unterschied zwischen Inline-Elementen und Blo...
Detaillierte Erläuterung der Verwendung des Alibaba Cloud-Image-Repository zum Erstellen ausländischer Docker-Images
Laden Sie ausländische Bilder mit Alibaba Cloud I...
Gestaltung von Popup-Fenstern und schwebenden Ebenen im Webdesign
Im Zuge des schrittweisen Übergangs von herkömmli...
Befehle zum Suchen der Domänen-IP-Adresse im Linux-Terminal (fünf Methoden)
In diesem Tutorial wird erklärt, wie Sie die IP-A...
Anweisungen zum Wiederherstellen von Daten nach versehentlichem Löschen einer MySQL-Datenbank
Bei täglichen Betriebs- und Wartungsarbeiten ist ...
Mac+IDEA+Tomcat-Konfigurationsschritte
Inhaltsverzeichnis 1. Herunterladen 2. Installati...
So stellen Sie mit einem Zertifikat eine Verbindung zu einem Remote-Docker-Server her
Inhaltsverzeichnis 1. Verwenden Sie Skripte, um T...
Eine Zeile CSS-Code zur Integration von Avatar und Nationalflagge
Es ist Nationalfeiertag und jeder kann es kaum er...
So legen Sie den Stil geordneter und ungeordneter Listenelemente in CSS fest
In einer ungeordneten Liste ul>li ist das Symb...
Centos7-Installation des FFmpeg-Audio-/Video-Tools – einfaches Dokument
ffmpeg ist ein sehr leistungsfähiges Tool zur Aud...
Einfaches Anwendungsbeispiel für MySQL-Trigger
Dieser Artikel veranschaulicht anhand von Beispie...
Wichtige Hinweise zu PHP-HTMLhtml-Wissenspunkten (unbedingt lesen)
1. Verwenden Sie Frameset, Frame und Iframe, um m...
Webdesigner ist ein geeignetes Talent
<br />Es gibt keine Straße auf der Welt. Wen...