Wie entferne ich ein Element aus dem Fluss?

Question 1

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?

Question 2

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?

Question 3

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

Question 4

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 .

Question 5

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

Question 6

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.

Question 7

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.

Question 8

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.

Question 9

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

float: right

Question 10

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.

Answer 1

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

Answer 2

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

Answer 3

Was versuchst du zu erreichen?

Griegs

Answer 4

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

Answer 5

1

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

ludovico

Answer 6

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

Answer 7

4

position: absoluteverursacht ein Neulackieren beim Scrollen, was sich

negativ

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

2

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

Benutzer

Answer 12

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

Answer 13

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

Answer 14

4

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

Greg Hewgill

Answer 15

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

Answer 16

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.

Answer 17

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.

Answer 18

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.

Answer 19

0

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

float: right

air5
quelle

Answer 20

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.

Wie entferne ich ein Element aus dem Fluss?

Antworten: