Wie entferne ich ein Element aus dem Fluss?

81

Ich weiß, position: absolutedass ein Element aus dem Fluss entfernt wird und es nicht mehr mit seinen Nachbarn interagiert.

Welche anderen Möglichkeiten gibt es, um dies zu erreichen?

css

— Hingebungsvoll
quelle

Meinen Sie damit, es vollständig von der Seite zu entfernen oder es einfach unsichtbar zu machen? Was meinst du mit "Interaktion mit seinen Nachbarn"?

— Jason Hall

Was versuchst du zu erreichen?

— Griegs

Ich dachte nur, es gäbe einen Weg, es zu tun, und ich konnte mich nicht erinnern, also wandte ich mich an Stackoverflow :) Position: Absolut funktioniert, aber ich habe mich nur gefragt

— Devoted

1

Nützliche Antwort: stackoverflow.com/a/11917186/11298742

— ludovico

61

Keiner?

Ich meine, abgesehen davon display: none, dass ich es komplett aus dem Layout entfernt habe , bin ich mir ziemlich sicher, dass es das ist.

Stehen Sie vor einer bestimmten Situation, in der dies position: absolutekeine praktikable Lösung ist?

— Matchu
quelle

4

position: absoluteverursacht ein Neulackieren beim Scrollen, was sich

— negativ

7

Dies ist nicht die Antwort, die ein Benutzer erwartet, wenn er hierher kommt, da der Titel "Aus dem Fluss entfernen" lautet. display: noneEntfernt das Element nicht nur vollständig aus dem Durchfluss.

— jstice4all

116

Ein Trick, der position:absolutemir schmackhafter macht , ist, seine Eltern zu machen position:relative. Dann ist das Kind relativ zur Position des Elternteils "absolut".

jsFiddle

— Joe Flynn
quelle

37

Eine andere Möglichkeit besteht darin height: 0; overflow: visible;, ein Element festzulegen, das sich jedoch nicht wirklich außerhalb des Flusses befindet und daher das Zusammenbrechen des Randes unterbrechen kann .

— Nutzer
quelle

2

@Jessica, benutze ein Pseudoelement ::beforemit absoluter Positionierung, um den Hintergrund zu emulieren.

— Benutzer

4

Es gibt display: none, aber ich denke, das könnte ein bisschen mehr sein als das, wonach Sie suchen.

— Greg Hewgill
quelle

2

Aber selbst dann ist es immer noch "in der Nachbarschaft". Die absolute Position relativ zum Körper ist der einzige Weg, um die volle Kontrolle über seine Position zu haben. Denken Sie daran, wenn das übergeordnete Element als relativ deklariert ist, ist der absolute Ursprung relativ dazu - in diesem Fall müssten Sie das Element an document.body oder ein nicht relatatives deklariertes Element anhängen.

— Dan Heberden

4

Was? Die Position ist nicht relevant, wenn das Element nicht einmal angezeigt wird .

— Greg Hewgill

In Firefox werden Überprüfungsnachrichten für Eingaben mit display: nonean einer unsinnigen Stelle angezeigt (oben auf dem Bildschirm, wobei die Registerkarten verdeckt werden). Es scheint, dass nicht angezeigte Elemente wirklich positionlos sind, zumindest in diesem Browser.

— Brilliand

3

Wenn Sie es schweben lassen, wird der Fluss neu organisiert, aber die Position: Absolut ist die einzige Möglichkeit, ihn vollständig aus dem Fluss des Dokuments zu entfernen.

— Sam Bowler
quelle

3

position: fixed;wird auch ein Element aus dem Fluss "herausspringen", wie Sie sagen. :) :)

position: absolutemuss von einer Position begleitet werden. z.Btop: 1rem; left: 1rem

position: fixedPlatziert das Element jedoch an der Stelle, an der es normalerweise gemäß dem Dokumentfluss angezeigt wird, verhindert jedoch, dass es sich danach bewegt. Außerdem wird die Höhe effektiv auf 0px (in Bezug auf den Dom) gesetzt, sodass das nächste Element darüber verschoben wird.

Dies kann ziemlich cool sein, da Sie festlegen können position: fixed; z-index: 1(oder welchen Z-Index Sie auch immer benötigen), damit er über dem nächsten Element "erscheint".

Dies ist besonders nützlich für Überschriften mit fester Position, die beispielsweise beim Scrollen oben bleiben.

— Brian Lewis
quelle

1

Ich weiß, dass diese Frage mehrere Jahre alt ist, aber ich denke, Sie versuchen es so zu bekommen, dass ein großes Element wie ein Bild die Höhe eines Div nicht beeinträchtigt?

Ich bin gerade auf etwas Ähnliches gestoßen, bei dem ich wollte, dass ein Bild ein Div überflutet, aber ich wollte, dass es am Ende einer Textfolge steht, also wusste ich nicht, wo es enden würde.

Eine Lösung, die ich herausgefunden habe, bestand darin, die Höhe des unteren Randes des Elements anzugeben. Wenn das Bild also 20 Pixel hoch ist,

margin-bottom: -20px; vertical-align: top;

zum Beispiel.

Auf diese Weise schwebte es über die Außenseite des Div und blieb neben dem letzten Wort in der Zeichenfolge.

— Jeremy Miller
quelle

0

Der Vollständigkeit halber: Die floatEigenschaft entfernt auch ein Element aus dem HTML-Fluss, z

float: right

— air5
quelle

-1

Versuchen Sie dies zu verwenden:

position: relative;
clear: both;

Ich benutze es, wenn ich die absolute Position nicht verwenden kann, zum Beispiel beim Drucken, wenn Sie page-break-after: always;nur mit funktionieren position:relative.

— Massimo
quelle