Unidad 7. Maquetación web (II)

7.3. Desbordamiento

Al utilizar un elemento de bloque, como una capa, un párrafo, el body, etc... el tamaño depende del contenido. Pero al definir un tamaño fijo nos puede surgir un problema: ¿qué pasa si el contenido del elemento (texto, imágenes, etc...) no cabe? Entonces se produce un desbordamiento, que podemos controlar desde el estilo con la propiedad overflow. Podemos darle estos valores:

• visible. Es la opción por omisión. El contenido sale de elemento, y puede que se solape con los elementos que haya a continuación.
• hidden. Lo que no quepa en el elemento, queda oculto.
• auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.
• scroll. Siempre muestra las barras de desplazamiento.

Si el desbordamiento es visible, puede tapar a los elementos que haya después.

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

• static. Es el normal.
• 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.
• fixed. Se establece la posición del elemento de forma parecida al absoluto, pero el elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento.

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.

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