¿Cómo eliminar un elemento del flujo?

82

Sé que position: absolutesacará un elemento del flujo y dejará de interactuar con sus vecinos.

¿Qué otras formas existen para lograrlo?

css

— Devoto
fuente

¿Quiere decir eliminarlo de la página por completo o simplemente hacerlo invisible? ¿Qué quiere decir con "interactuar con sus vecinos"?

— Jason Hall

¿Qué estás intentando lograr?

— Griegs

Sólo pensé que había una manera de hacerlo y que no podía recordar lo que di vuelta a stackoverflow :) posición: obras absolutos, pero me preguntaba

— Dedicado

1

Respuesta útil: stackoverflow.com/a/11917186/11298742

— ludovico

61

¿Ninguna?

Quiero decir, aparte de eliminarlo del diseño por completo display: none, estoy bastante seguro de que eso es todo.

¿Se enfrenta a una situación particular en la que position: absoluteno es una solución viable?

— Matchu
fuente

4

position: absolutehace que volver a pintar sobre el desplazamiento, lo cual es malo para el rendimiento en el móvil

— bafromca

7

Esta no es la respuesta que un usuario espera obtener cuando llega aquí, ya que el título dice "eliminar del flujo". display: noneelimina completamente el elemento no solo del flujo.

— jstice4all

116

Un truco que me hace position:absolutemás apetecible es hacer a su padre position:relative. Entonces el niño será "absoluto" en relación con la posición del padre.

jsFiddle

— Joe Flynn
fuente

37

Otra opción es establecer height: 0; overflow: visible;un elemento, aunque no estará realmente fuera del flujo y, por lo tanto, puede romper el margen y colapsar .

— usuario
fuente

2

@Jessica, usa un ::beforepseudo elemento con posicionamiento absoluto para emular el fondo.

— usuario

4

Lo hay display: none, pero creo que puede ser un poco más de lo que estás buscando.

— Greg Hewgill
fuente

2

Pero incluso entonces, sigue "en el vecindario" ... la posición absoluta en relación con el cuerpo es la única forma de tener un control total sobre su posición. Tenga en cuenta que si su padre se declara relativo, entonces su origen absoluto es relativo a eso; tendría que agregar el elemento a document.body o al elemento declarado no relatativo en ese caso.

— Dan Heberden

4

¿Qué? La posición no es relevante si el elemento ni siquiera se muestra .

— Greg Hewgill

En Firefox, los mensajes de validación para las entradas con display: noneaparecen en una ubicación sin sentido (en la parte superior de la pantalla, cubriendo las pestañas). Parece que los elementos que no se muestran son realmente sin posición, al menos en ese navegador.

— Brilliand

3

Flotar reorganizará el flujo, pero la posición: absoluta es la única forma de eliminarlo por completo del flujo del documento.

— Sam Bowler
fuente

3

position: fixed;también "sacará" un elemento del flujo, como usted dice. :)

position: absolutedebe ir acompañado de un puesto. p.ejtop: 1rem; left: 1rem

position: fixedsin embargo, colocará el elemento donde normalmente aparecería de acuerdo con el flujo del documento, pero evitará que se mueva después de eso. También establece efectivamente la altura en 0px (con respecto al dom) para que el siguiente elemento se mueva hacia arriba sobre él.

Esto puede ser muy bueno, porque puede configurar position: fixed; z-index: 1(o cualquier índice z que necesite) para que "aparezca" sobre el siguiente elemento.

Esto es especialmente útil para los encabezados de posición fija que permanecen en la parte superior cuando se desplaza, por ejemplo.

— Brian Lewis
fuente

1

Sé que esta pregunta tiene varios años, pero lo que creo que está tratando de hacer es conseguir que un elemento grande, como una imagen, no interfiera con la altura de un div.

Me encontré con algo similar, donde quería que una imagen desbordara un div, pero quería que estuviera al final de una cadena de texto, así que no sabía dónde terminaría.

Una solución que descubrí fue poner el margen inferior: altura del elemento, por lo que si la imagen tiene 20 píxeles de altura,

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

por ejemplo.

De esa manera, flotó sobre el exterior del div y permaneció junto a la última palabra de la cadena.

— Jeremy Miller
fuente

0

En aras de la integridad: la floatpropiedad también elimina un elemento del flujo del HTML, por ejemplo

float: right

— air5
fuente

-1

Intenta usar esto:

position: relative;
clear: both;

Lo uso cuando no puedo usar la posición absoluta, por ejemplo, en la impresión cuando usa page-break-after: always;funciona bien solo con position:relative.

— Massimo
fuente