52
Sé que "position: absolute" mostrará un elemento del "flujo de HTML/CSS" y dejará de interactuar con sus vecinos. ¿Qué otras formas hay para lograr esto?¿Cómo eliminar un elemento del flujo de HTML/CSS?
A
Respuesta
40
¿Ninguna?
Es decir, aparte de eliminarlo del diseño por completo con display: none, estoy bastante seguro de que es eso.
¿Está enfrentando una situación particular en la que position: absolute no es una solución viable?
+4
'position: absolute' causa el repintado en el desplazamiento, lo que es malo para el rendimiento en el dispositivo móvil – bafromca
+1
Como demuestra @user a continuación, esta respuesta no es necesariamente cierta. – kittykittybangbang
+2
Esta no es la respuesta que un usuario espera obtener cuando viene aquí ya que el título dice "eliminar del flujo". 'display: none' elimina por completo el elemento del flujo. – jstice4all
5
Hay display: none, pero creo que podría ser un poco más de lo que estás buscando.
+2
Pero aún así, todavía está "en el vecindario" .. posición absoluta relativa para el cuerpo es la única forma de tener control total sobre su posición. Tenga en cuenta que si el padre se declara como relativo, entonces su origen absoluto es relativo a eso; en ese caso, tendría que agregar el elemento a document.body o elemento declarado no relativo. –
+4
¿Qué? La posición no es relevante si el elemento ni siquiera * se muestra *. –
+0
En Firefox, los mensajes de validación para las entradas con 'display: none' aparecen 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 verdaderamente sin posición, al menos en ese navegador. – Brilliand
3
Flotando reorganizará el flujo pero la posición: absoluta es la única manera de eliminarlo por completo del flujo del documento.
85
Un truco que hace position:absolute más agradable para mí es hacer que su padre position:relative. Entonces el niño será 'absoluto' en relación con la posición del padre.
+2
Buen consejo hombre – Exitos
+0
Trabajó para mí con el padre relativo, hijo absoluto. – JoshuaTree
-2
intenta utilizar esto:
position: relative;
clear: both;
lo uso cuando no puedo utilizar la posición absoluta, por ejemplo, en la impresión cuando se utiliza page-break-after: always; funciona bien únicamente con position:relative.
27
Otra opción es establecer height: 0; overflow: visible; en un elemento, aunque no estará realmente fuera del flujo y por lo tanto puede romper margin collapsing.
+2
+1. esta solución para el problema de 'elemento fuera de flujo' es complicada pero muy cercana al comportamiento deseado. –
+1
Esta es una gran respuesta: estaba tratando de eliminar un div del flujo de elementos flotados y esto funcionó maravillosamente (ejemplo: https://jsfiddle.net/nb36ara5/) –
+0
Excelente pensamiento, pero el color de fondo no funcionará . – Jessica
1
Sé que esta pregunta tiene varios años, pero lo que creo que estás tratando de hacer es conseguirlo cuando un elemento grande, como una imagen, no interfiere con la altura de un div.
Acabo de encontrar algo similar, donde quería que una imagen se desborde 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 me di cuenta fue poner el margin-bottom: altura de -elemento, por lo que si la imagen es altura de 20 píxeles,
margin-bottom: -20px; vertical-align: top;
por ejemplo.
De esa manera flotó sobre el exterior del div, y se quedó al lado de la última palabra de la cadena.
3
position: fixed; también "sacarán" un elemento del flujo, como dices. :)
position: absolute debe ir acompañado de un puesto. p.ej. top: 1rem; left: 1rem
position: fixed Sin 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 de manera efectiva la altura a 0px (con respecto a la dom) para que el siguiente elemento se desplace hacia arriba.
Esto puede ser muy bueno, porque puede establecer position: fixed; z-index: 1 (o cualquier índice z que necesite) para que "salte" 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.
Cuestiones relacionadas
- 1. ¿Cómo eliminar un elemento xml del archivo?
- 2. ¿Cómo eliminar un elemento del objeto jQuery?
- 3. Tridion: colocación del elemento en Flujo de trabajo del evento
- 4. Cómo eliminar un elemento de un IGrouping
- 5. Cómo eliminar un elemento de un conjunto?
- 6. Eliminar elemento del objeto jQuery
- 7. cómo eliminar cada estilo del elemento?
- 8. jQuery Eliminar plugin del elemento
- 9. Python: eliminar elemento del montón
- 10. ¿Cómo eliminar el borde solo desde un lado del elemento?
- 11. ¿Cómo eliminar elemento de un objeto JavaScript
- 12. Eliminar un elemento del Panel de administración de Magento Navegación
- 13. emacs lisp: ¿Cómo eliminar/eliminar un elemento de una lista?
- 14. ¿Cómo eliminar un elemento lentamente con jQuery?
- 15. Eliminar un elemento del medio de std :: heap
- 16. Eliminar un elemento del árbol visual de forma genérica
- 17. jQuery Eliminar texto específico de un elemento
- 18. Backbone.js: Eliminar un elemento de una colección
- 19. jQuery - Eliminar todo después de un elemento
- 20. asp.net: ¿Cómo puedo eliminar un elemento de una lista desplegable?
- 21. Cómo eliminar el elemento dom del objeto jquery
- 22. Cómo eliminar el elemento raíz del archivo xml
- 23. ¿Cómo puedo eliminar un elemento de una secuencia en Clojure?
- 24. Eliminar un elemento de una colección (NHibernate)
- 25. Cómo puedo obtener un flujo de entrada del objeto HSSFWorkbook
- 26. clojure - eliminar un elemento de un vector de referencia
- 27. Cómo eliminar un elemento seleccionado de ListView usando CursorAdapter
- 28. Eliminar un elemento del DOM de la referencia al elemento solamente
- 29. Eliminar un elemento de una matriz (Java)
- 30. eliminar/restablecer css heredado de un elemento
¿Quiere decir eliminarlo de la página por completo o simplemente hacerlo invisible? ¿A qué te refieres con "interactuar con sus vecinos"? –
¿Qué estás tratando de lograr? – griegs
solo pensé que había una manera de hacerlo y no podía recordar, así que recurrí a la posición stackoverflow :): trabajos absolutos pero solo me preguntaba – Devoted