Warum sind meine absolut oder fest positionierten Elemente nicht dort, wo ich sie erwarte?-CSS-Tutorial-php.cn

Warum sind meine absolut oder fest positionierten Elemente nicht dort, wo ich sie erwarte?

Mary-Kate Olsen

Freigeben： 2024-12-30 09:03:14

Original

783 Leute haben es durchsucht

Why Aren't My Absolutely or Fixed-Positioned Elements Where I Expect Them?

Warum absolut oder fest positionierte Elemente nicht dort platziert werden, wo sie erwartet werden

Bei der CSS-Positionierung werden absolute und feste Elemente relativ zum Ansichtsfenster oder dem am nächsten positionierten übergeordneten Element platziert , jeweils. Allerdings kann es manchmal schwierig sein, ihr Verhalten zu verstehen.

Die statische Position verstehen

Wenn die Positionseigenschaft eines Elements auf „Auto“ oder „Statisch“ eingestellt ist, nimmt es die statische Position an. Dies bedeutet, dass es so platziert wird, als ob seine Position statisch wäre. In diesem Fall wird die Position des Elements anhand seiner Ränder, Umrandungen, Polsterung und seines Inhalts berechnet.

Szenario 1: Absolutes graues Feld außerhalb des relativen übergeordneten Elements

In Ihrem ersten Codeausschnitt wird das Das graue Kästchen hat eine absolute Position. Der übergeordnete Container (

) hat jedoch eine Position: relativ; Eigenschaft, die einen neuen Positionierungskontext für ihre untergeordneten Elemente erstellt. Da das graue Feld das letzte untergeordnete Element ist, wird es relativ zum Boden des Containers positioniert.

Szenario 2: Graues Feld nicht in der oberen linken Ecke

In Ihrem zweiten Codeausschnitt , haben Sie das graue Kästchen an die zweite Position innerhalb des Containers verschoben. Es befindet sich jedoch immer noch nicht in der oberen linken Ecke, da der Container über eine Auffüllung verfügt: 40px 20px; Regel, die die hypothetische statische Position des Elements beeinflusst. Das graue Kästchen wird relativ zu dieser angepassten statischen Position positioniert.

Fazit

Um absolute oder feste Elemente korrekt zu positionieren, ist es wichtig, das Konzept der statischen Position und deren Berechnung zu verstehen basierend auf Rändern, Rahmen, Innenabstand und Inhalt. Dieses Wissen ermöglicht es Ihnen, das Verhalten dieser Elemente in verschiedenen Positionierungskontexten vorherzusagen.

Das obige ist der detaillierte Inhalt vonWarum sind meine absolut oder fest positionierten Elemente nicht dort, wo ich sie erwarte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!