CSS: Positionspositionierungsattribut und Zusammenfassung von Beispielanwendungen

Positionspositionierungsattribut

Position ist ein sehr wichtiges Attribut in CSS. Es umfasst absolute (absolute Positionierung), relative (relative Positionierung), statische (statische Positionierung, Standardwert), fest (feste Positionierung) vier Typen. Mit der Positionseigenschaft können wir ein Element relativ zu seiner normalen Position, seinem übergeordneten Element oder dem Browserfenster versetzen. Auch die Position ist ein Attribut, über das Anfänger leicht verwirrt werden können. Derzeit unterstützen fast alle Mainstream-Browser das Positionsattribut. Im folgenden Artikel werden wir über das Positionspositionierungsattribut und seine Anwendung in CSS sprechen.

Sie können zunächst kostenlose Kurse im Zusammenhang mit der PHP-Chinesisch-Website lernen

1. Lernen Sie„HTML+CSS Basic Introductory Tutorial“Grundlegendes Tutorial zur Positionierung von CSS Kapitel

2. Sehen Sie sich „Video-Tutorial zum Erlernen von CSS an Ihren Fingerspitzen“ an " 中CSS-PositionierungVideo-Tutorial

Positionierungsbezogene Anwendungen

1. Vertiefendes Verständnis des Positionsattributs in CSS

Absolute Positionierung wird vollständig aus dem entfernt Dokumentenfluss, vor dem Element Der belegte Platz wurde ebenfalls recycelt. Absolut positionierte Elemente werden basierend auf ihrem Positionierungskontext positioniert.
Es ist zu beachten, dass die absolute Positionierung Inline-Elemente in Elemente auf Blockebene umwandeln kann. Aber es ist sicher, dass, sobald ein Inline-Element absolut positioniert ist, die Position des Elements schwer zu erfassen ist (Grund: Wenn für das Element keine inneren und äußeren Ränder festgelegt sind und es keine absolut positionierten Elemente davor, danach, links, und rechts, dann bleibt das Element vorübergehend an seiner ursprünglichen Position, aber wenn für das Element Ränder festgelegt sind, bleibt das Element vorübergehend einen Rand von der ursprünglichen Position entfernt. Wenn es Elemente mit festgelegter absoluter Positionierung auf der Vorder- und Rückseite gibt , links und rechts, dann sucht das Element nach dem obersten Element, das nicht unter dem absolut positionierten Element liegt (Haben Sie es jemals bereut, auf den Grund gehört zu haben?) Wenn Sie also eine absolute Positionierung festlegen, müssen Sie dies tun Positionieren Sie sofort die Oberseite und die linke Seite des Elements.

2. Analyse des Unterschieds zwischen relativer und absoluter Position in CSS

Position hat die folgenden Attribute: statisch, erben, fest, absolut, relativ
Die Top 3 Leicht zu verstehen und zu unterscheiden:
statisch: Dies ist der Standardzustand, es gibt keine Positionierung und das Element erscheint im normalen Fluss (ohne Berücksichtigung der Anweisungen oben, unten, links, rechts oder Z-Index).
nherit: Erbt den Wert des Positionsattributs vom übergeordneten Element.
behoben: Erzeugen Sie absolut positionierte Elemente, die relativ zum Browserfenster positioniert sind. (Das heißt, beim Scrollen im Browser wird das Element immer an einer bestimmten Position im sichtbaren Bereich des Fensters angezeigt).

3.Einführung in die Verwendung der CSS-Positionierung

absolut und festFunktionen:

Die Breite des Blocks -level-Elemente sind, wenn sie nicht definiert sind, nicht mehr 100 %, sondern werden automatisch entsprechend dem Inhalt angepasst.

b Wenn der Z-Index nicht definiert ist, deckt das absolute Element andere Elemente ab.

c. Es bricht aus dem normalen Dokumentfluss aus und belegt keinen Platz mehr, ähnlich dem Effekt nach dem Floating.

absolut ist eine absolute Positionierung relativ zum vorherigen übergeordneten Element statisch. Wenn die Position des übergeordneten Elements nicht angegeben ist, wird „absolute“ absolut relativ zum gesamten HTML-Dokument positioniert.

4.Erklärung der Positionierungsmethode unter Verwendung des Positionsattributs in CSS

Ein statisch positioniertes Element ignoriert alles oben, rechts und links Werte, die von den Eigenschaften „bottom“, „left“ und „z-index“ deklariert werden. Damit Ihr Element diese fünf Eigenschaften verwenden kann, müssen Sie zunächst einen dieser drei Werte auf seine Positionseigenschaft anwenden: absolut, relativ, fest, Position. Das Element mit dem Wert inherit ist dasselbe wie der geerbte Wert Von allen anderen Eigenschaften erbt das Element den Positionswert des übergeordneten Elements.

5. Zusammenfassung von vier Methoden zur Positionierung in CSS

Außerhalb des Standarddokumentflusses

Funktionen: (1) Wenn dieses Element kein übergeordnetes Element hat, werden in Zukunft oben, links, rechts und unten relativ zum Browserfenster positioniert

(2) Wenn das absolut positionierte Element hat ein übergeordnetes Element, aber das übergeordnete Element ist nicht relativ positioniert, dann sind zu diesem Zeitpunkt oben, links, rechts und unten immer noch relativ zum Browserfenster positioniert

(3) Wenn das absolut positionierte Element a hat Elternelement, und das übergeordnete Element ist positioniert ( Nicht statisch), dann basiert der Versatz dieses absolut positionierten Elements auf seinem eigenen übergeordneten Element

　 (4) Das Element nach der absoluten Positionierung wird die Position nicht einnehmen die Seite

6. CSS-Positionierung und Float

a Wenn ein p mit einer Standardbreite von 100 % vorhanden ist, wird das Element nach dem Hinzufügen der absoluten Positionierung angezeigt Sofort inline-blockiert, und die Standardbreite wird automatisch angepasst. Durch die Anpassung an die interne Breite des Elements werden Breite und Höhe der Seite reduziert.

b. Aufgrund der Flexibilität der absoluten Positionierung ist es bei normalen Seitenlayouts manchmal leicht, den absoluten/relativen/oben/links/z-Index zu missbrauchen, um Probleme zu sparen, was später zu Erweiterungen führt und Wartung verursachen Probleme

Verwandte Fragen und Antworten

1. So erreichen Sie ähnliche Funktionen ohne Verwendung von position: absolute

Kompatibilitätsprobleme mit Position: auf dem mobilen Endgerät behoben

4. Wie kann sich ein Div mit dem Browser nach links und rechts bewegen, nachdem das Attribut „position:fixed“ festgelegt wurde?

[Verwandte Empfehlungen]

"CSS 0 Basic Introductory Tutorial"

2 Chinesisch Kostenloses Online-Video-Tutorial: „php.cn Dugu Jiujian (2) – CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonCSS: Positionspositionierungsattribut und Zusammenfassung von Beispielanwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!