La posición en el diseño web

La posición en el diseño web

Entender cómo funciona la posición de los elementos en la web es crucial para el diseño Responsive, ya que nos permite hablar el mismo idioma que los desarrolladores y ayuda a tomar mejores decisiones de diseño. En comparación con las herramientas de diseño estático (Photoshop, Illustrator, Sketch) es más complejo, ya que la posición de los elementos depende de todo lo que se encuentra a su alrededor, el desplazamiento, el tamaño de pantalla y otros muchos factores.
Para complicar aún más las cosas, los diferentes tipos de posición en la web tienen nombres confusos - estático, absoluto, relativofijo - donde estático no es realmente estático y absoluto depende de la situación. Aquí presentamos un pequeño manual para entenderlo.

El índice Z

Antes de ver la colocación, conviene explicar el índice Z, que afecta a todos los tipos de posición de alguna manera. Así el índice Z es una forma sencilla de decir qué elemento se encuentra delante de otro, similar a las capas en las aplicaciones de diseño estático.

: se utiliza para los botones y los elementos donde se puede hacer clic. 
NO: evita situar los elementos de texto por delante de los elementos clicables ya que puedes hacer que sea imposible acceder a ellos ...
 

Posición estática

Estático es el tipo de posición por defecto. Aunque el nombre sugiere que nada se mueve, no es el caso. Estático significa que los elementos son estáticos frente al flujo (a medida que los tamaños de pantalla se hacen más pequeños, el contenido comienza a ocupar más espacio vertical y lo que se encuentre debajo, baja más) - si un elemento se mueve, el otro se moverá también.

: El objetivo es que tu web escale bien en todos los navegadores. Establecer los límites mínimo y máximo en horizontal y en vertical te ayudará a mantener un diseño perfecto (en ocasiones está bien que el contenido ocupe todo el ancho, por ejemplo en una pantalla de móvil, pero al trasladarlo a escritorio pierde el sentido)
NO: Cuidado con los bloques de texto, si su contenido cambia al escalar la pantalla, puedes llegar a romper el diseño.
 

Posición absoluta

El posicionamiento absoluto define un elemento basándonos en propiedades x e y. La parte difícil es que va a ser absoluto frente al elemento padre que tendrá una posición relativa, absoluta o fija. Si no hay ningún elemento padre, será absoluto en relación a la página. Los elementos con posición absoluta no se preocupan demasiado del flujo lo que significa que viven en su propio universo y no se ven afectados por los elementos que les rodean. Aparecerán encima de cualquier elemento con posición estática.

: ¿Un menú o logotipo que debe estar siempre en la parte superior de la página? ¡A por ello! 
NO: Absoluto y Responsive no son los mejores amigos.
 

Posición relativa

Los elementos con posición relativa se comportan exactamente como los estáticos, pero sirven como un marco de referencia local para los elementos secundarios con posición absoluta.

: Utiliza un contenedor con posición relativa donde englobar los elementos con posición absoluta. 
NO: Si un logotipo debe colocarse siempre en la parte superior de la pantalla, no los incluyas dentro de un elemento relativo.
 

Posición fija

Fijo significa que el elemento con esa posición siempre estará fijo independientemente del tamaño de la ventana del navegador o el desplazamiento.

: ¿La navegación de la web debe ser siempre visible en la parte superior de la pantalla? ¡Sí! 
NO: Si sitúas algún elemento clicable detrás de un elemento fijo, no se podrá hacer clic.
 

La vida real

En la vida real los tipos de posición se cambian a menudo a medida que avanzamos el desarrollo y se van mezclando entre sí. Por ejemplo, si desead que un banner se desplace hasta que llega a la parte superior de la pantalla, a continuación, en un primer momento tendrá una posición absoluta, pero entonces se convertirá en fija mediante la adición de algo de JavaScript.

Éstos son los fundamentos, pero hay más. ¿Qué ocurre si deseas alinear dos elementos de lado a lado de la página? Aquí es donde las propiedades de float, inline blocks y los márgenes entran en juego. Normalmente se combinan posiciones estáticas con márgenes ya que es más fácil de mantener el código.

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario: