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 pincipales: 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

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

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 mienrtas 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.


Enero-2019 (V 2.02)
Pág. 13.1
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.