relativa que posiciones posicionar posicion ordenar imagen div absoluta css xhtml dreamweaver

posiciones - position absolute css que es



¿Por qué no debería usar position: absolute para posicionar todo? (5)

Esta pregunta es hecha por uno de mis alumnos y quiero ilustrarlo con un ejemplo:

"¿Por qué no deberíamos crear el diseño del sitio con el botón Div Div de Dreamweaver? Es más fácil hacer el diseño con la Div. AP en lugar de Flotante + margen + relleno y si este método no es correcto, entonces por qué no es un buen método y por qué Adobe le da este botón en Dreamweaver hacer el diseño, incluso si no es la forma correcta de hacer el diseño? "

¿Alguien puede explicar, con un ejemplo simple y conciso, por qué position:absolute no debe usarse para posicionar todo ?

Conozco la posición: lo absoluto no es bueno, pero no puedo explicar bien ni proporcionar ningún ejemplo.

Divs Relativos

Ventajas: en primer lugar , permiten que su sitio maneje un cambio en el contenido. Si utilizara todas las etiquetas div absolutas, podría hacer que sus etiquetas se superpongan y se oculten entre sí cuando cambien los datos que contienen. En segundo lugar, muchos buenos sitios permiten que la información se ajuste según la resolución de pantalla y el tamaño del navegador que un usuario utiliza para acceder a la página web.

Contras : los cambios leves en el tamaño de sus divs relativos pueden hacer que sus etiquetas cambien la forma en que se ajustan. Además, el cambio en la información a veces puede causar cambios frustrantes en la apariencia general de su sitio, lo que a su vez requiere algunos ajustes.

Divs absolutos

Ventajas: en primer lugar , resuelven el problema de tener una pequeña cantidad de contenido dispersa en un área más grande. Este suele ser el caso con los datos de encabezado o sitios muy gráficos. A veces tendrá un área grande con una imagen de fondo y tendrá pocos controles a lo largo de los bordes y en el medio que deben colocarse exactamente. Los divs relativos serían un dolor de cabeza en este caso, ya que necesitaría múltiples divs adicionales y se romperían fácilmente cuando un usuario cambia el tamaño de su navegador o accede al sitio desde una pequeña pantalla de resolución. El otro uso importante de Absolute divs es empujar el contenido fuera del área en la que estaba originalmente. ¡Un gran ejemplo de esto son los menús! El encabezado de un menú generalmente está contenido dentro de un div, pero los elementos dentro de él caen en otro div cuando el encabezado del menú está sobre. Además, la información sobre herramientas y las cosas que aparecen en la pantalla generalmente requieren un posicionamiento absoluto.

Contras: los divs absolutos se encuentran en un problema similar a los relativos si se utilizan de forma incorrecta. El problema es que se vuelven tediosos de manejar. Específicamente, si usó 10 divs absolutos para controlar sus áreas de contenido y una de esas áreas se hizo más grande o más pequeña porque su contenido cambió, podría tener que modificar la ubicación de cada div. Lo que llevaría mucho tiempo.

En conclusión : muchas veces querrá usar un sitio con las secciones Absolute y Relative div, no solo porque ambas tienen un propósito, sino porque al usarlas juntas, puede crear las páginas web con el mejor aspecto y la menor cantidad de tiempo y código.

Bueno, por una cosa, no conoce el tamaño de pantalla para cada dispositivo que pueda acceder a su sitio. La mayoría probablemente tendrá pantallas de tamaño completo (800 x 600 o probablemente más grandes), pero algunas serán de aspecto amplio (por ejemplo, 1440 x 900) y algunas podrían ser dispositivos móviles.

Permitir que cada dispositivo diseñe los elementos de su página (s) según las reglas (por ejemplo, flotación, margen, relleno) significa que cada dispositivo puede optimizar el contenido para su propia visualización.

OK, entonces digamos que posicionas absolutamente todo. ¿Qué sucede cuando #mainContent tiene un párrafo en una página y dos párrafos en la segunda página? ¿Dónde #footer pixel-wise? ¿Qué pasa si el usuario aumenta su tamaño de fuente?

Dreamweaver proporciona el botón porque el posicionamiento absoluto a veces es útil. Eso no lo hace siempre útil.

OMG increíble momento! Hoy hubo un buen artículo sobre noticias de hackers: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Básicamente, esto le muestra los diferentes tipos de posicionamientos: relativo, absoluto, flotante, etc., así como por qué usarlos. No olvide la posición: corregir es bueno para algo como una leyenda que siempre aparece en la página.

Conozco la posición: lo absoluto no es bueno, pero no puedo explicar bien ni proporcionar ningún ejemplo.

No es que no sea bueno. Es. Es solo que no es la solución correcta para todos los problemas. Al igual que un martillo, no es una buena solución para atornillar una bombilla, pero eso no indica que el martillo sea una mala herramienta. (Esperemos que la analogía ayude)

Porque el usuario puede cambiar el tamaño de la ventana de su navegador.