Unidad 18. Diseño de página. Maquetación web (III)


18.4. Posicionamiento

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 capas, párrafos, listas, etc, se irán colocando uno debajo del otro. A este posicionamiento se le denomina estático.

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

Esta propiedad puede encontrarse fácilmente pulsando el botón Diseño del subpanel Propiedades del panel Diseñador de CSS.

Al cambiar el desplazamiento de un elemento, es fácil que se solape sobre otro. 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.

El z-index sólo afecta a los elementos con un posicionamiento distinto de static. Los elementos posicionados siempre se verán por encima de otros elementos no posicionados, y entre ellos se verá encima el de mayor z-index, o en su defecto, el que se haya generado en último lugar.

Truco: Para que un elemento sin posicionamiento se vea por encima de otro posicionado, podemos darle posicionamiento relativo, lo que no afectará a su apariencia si no lo desplazamos, y un z-index mayor que el del elemento posicionado.

En el editor CSS encontramos estas propiedades agrupadas bajo posición.

En el Diseñador de CSS, esta propiedad se encuentra en la sección Diseño del subpanel Propiedades.

18.5. Posicionamiento relativo

El posicionamiento relativo coloca el elemento en su posición normal, y a partir de ahí lo desplaza la distancia que le indiquemos. Al desplazarlo deja un "hueco" donde estaría su posición normal.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: relative;.

Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la izquierda y right para hacerlo a la derecha. Utilizar valores negativos, produce el efecto opuesto. Por ejemplo, para desplazar un elemento 40px a la derecha, podríamos poner right: 40px; o left: -40px;.

Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo hacia arriba o bottom para hacerlo hacia abajo.

Como sabes, podemos indicar estos valores en el Editor CSS, pero también usando el esquema de posición del Diseñador CSS.

Si no establecemos valores de desplazamiento el elemento no cambia su posición, por eso es muy común asignar el posicionamiento relativo a elementos para poder utilizar una propiedad que requiere posicionamiento, como puede ser z-index.


Marzo-2015
Pág. 18.3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

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


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