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.
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 .
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.
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.
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.
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.
Respuestas:
¿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?fuente
position: absolutehace que volver a pintar sobre el desplazamiento, lo cual es malo para el rendimiento en el móvildisplay: noneelimina completamente el elemento no solo del flujo.Un truco que me hace
position:absolutemás apetecible es hacer a su padreposition:relative. Entonces el niño será "absoluto" en relación con la posición del padre.jsFiddle
fuente
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 .fuente
::beforepseudo elemento con posicionamiento absoluto para emular el fondo.Lo hay
display: none, pero creo que puede ser un poco más de lo que estás buscando.fuente
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.Flotar reorganizará el flujo, pero la posición: absoluta es la única forma de eliminarlo por completo del flujo del documento.
fuente
position: fixed;también "sacará" un elemento del flujo, como usted dice. :)position: absolutedebe ir acompañado de un puesto. p.ejtop: 1rem; left: 1remposition: 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.
fuente
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.
fuente
En aras de la integridad: la
floatpropiedad también elimina un elemento del flujo del HTML, por ejemplofloat: rightfuente
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 conposition:relative.fuente