Unidad 13. Posicionamiento. Flexbox. Grid (I)

Diseñar una página web es una tarea primordial a la hora de crear páginas web. El posicionamiento es lo que nos permite colocar los elementos de una página web para crear un diseño. Los modos de posicionamiento son una característica técnica, el diseño es una actividad creativa o incluso artística. Pero sin conocer bien el posicionamiento no tendremos herramientas para diseñar. Por esto vamos a estudiar primero el posicionamiento en esta unidad, y en las siguientes veremos diseño y maquetación.

El posicionamiento se establece, principalmente, con tres propiedades: position, float y display.

La propiedad position puede tomar los valores: static, relative, absolute, fixed y sticky.

La propiedad float puede tomar los valores: left, right y none.

La propiedad display puede tomar los valores principales: block, inline, inline-block, flex, inline-flex y grid.

Hay otras propiedades que también intervienen, en menor medida, en el posicionamiento como text-align, para alinear el texto, background-position, para colocar las imágenes de fondo, margin y padding, y clear para romper el efecto de float.

Vamos a ir estudiando todo esto por este orden y caso por caso.

13.1. Posicionamiento estatico

En este vídeo explicamos el posicionamientop estático y relativo:

Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los elementos. Existen cinco tipos de posicionamiento:

• static. Es el normal. Un elemento a continuación de otro. Es el valor por defecto.
• relative. El posicionamiento relativo coloca el elemento en su posición normal. A partir de ahí, podemos desplazar el elemento, permaneciendo el hueco de su posición original.
• absolute. Con el posicionamiento absoluto, especificamos la posición del elemento con respecto al elemento que lo contiene, además no ocupa espacio.
• fixed. Se establece la posición del elemento de forma parecida al absoluto, pero siempre respecto al contenedor body, con lo cual el elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento.
• sticky. Es una mezcla entre posición relativa y fija. Inicialmente el elemento ocupa una posición relativa pero cuando se hace scroll, en lugar de desplazarse y quedar oculto, queda fijo y visible en la parte superior o inferior de la pantalla

Posicionamiento static. El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo. Por defecto, los elementos se posicionan uno a continuación de otro. Si se trata de elementos de bloque, como contenedores div, párrafos, listas, etc, se irán colocando uno debajo del otro; y si te trata de elementos de línea, como span, hiperenlaces, strong, etc, se irán colocando uno al lado del otro, en la misma línea mientras haya sitio. A este posicionamiento se le denomina estático y es el valor por defecto. Con este posicionamiento no podemos desplazar el elemento con left, right, top y bottom como haremos con el posicionamiento relativo,

Solapamiento.

Al posicionar elementos cabe la posibilidad de que unos se solapen con otros. Esto produce que un elemento quede oculto. Para controlar esto, disponemos de la propiedad CSS z-index, a la que podemos asignar un valor numérico. Un elemento con un z-index mayor se verá por encima de otro con un z-index menor.

Las cajas del siguiente ejemplo aparecen solapadas. Al pasar el cursor sobre ellas, se le asigna z-index: 10;, lo que hace que se vean por encima del resto.

Nota: para que z-index funcione, se debe de haber especificado un tipo de posicionamiento para el elemento.