Heim > Web-Frontend > CSS-Tutorial > Warum führen „float: right' und „position: absolute' dazu, dass ein Div auf der linken Seite erscheint?

Warum führen „float: right' und „position: absolute' dazu, dass ein Div auf der linken Seite erscheint?

Barbara Streisand
Freigeben: 2024-10-27 09:29:30
Original
285 Leute haben es durchsucht

Why Does `float: right` and `position: absolute` Cause a Div to Appear on the Left?

Problem: Float: Right und Position: Absolute kooperieren nicht

In einem Versuch, ein Div zu erstellen, das sich am rechten Rand davon befindet parent, Sie haben float:right verwendet, was den gewünschten Effekt erzielt hat. Sie wollten jedoch auch, dass die Einfügung des div den vorhandenen Inhalt nicht stört, was Sie dazu veranlasste, position:absolute hinzuzufügen. Unerwarteterweise führte diese Kombination dazu, dass das Div auf der linken Seite seines übergeordneten Elements angezeigt wurde, wodurch die Eigenschaft „float:right“ negiert wurde. Um dieses Problem zu lösen, untersuchen wir mögliche Lösungen.

Lösung

Um Ihr gewünschtes Verhalten zu erreichen, sollten Sie position:absolute in Verbindung mit right:0 verwenden. Dadurch entfällt die Notwendigkeit von float:right bei Verwendung der absoluten Positionierung.

<code class="css">position: absolute;
right: 0;</code>
Nach dem Login kopieren

Stellen Sie außerdem sicher, dass das übergeordnete Element position:relative; eingestellt, um die absolute Positionierung des untergeordneten Teils zu ermöglichen.

Das obige ist der detaillierte Inhalt vonWarum führen „float: right' und „position: absolute' dazu, dass ein Div auf der linken Seite erscheint?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage