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. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. Éste sí cabe.
scroll. Éste sí cabe.

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:

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.


Enero-2010
Pág. 7.2
Atrás Inicio Adelante





Página inicial  Cursos Informática Gratuitos

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


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