Atributos para capas

  • Por
Veamos el posicionamiento de capas y otros atributos que podemos utilizar al definirlas.
Hemos visto en el capítulo anterior qué son las capas y algunas pequeñas muestras sobre cómo crearlas y darle algún estilo. Ahora vamos a ver en detenimiento los atributos específicos para aplicar posicionamiento a una capa y otros estilos.

Antes que nada cabe decir que una capa puede tener cualquier atributo de estilos de los que hemos visto en el manual de CSS. Así, el atributo color indica el color del texto de la capa, el atributo font-size indica el tamaño del texto y así con todos los atributos ya vistos.

Ahora bien, existen una serie de atributos que sirven para indicar la forma, el tamaño de las capas, la visibilidad, etc, que no hemos visto en capítulos anteriores y que veremos a continuación.

Atributo position

Indica el tipo de posicionamiento de la capa. Puede tener dos valores, relative o absolute.

- relative indica que la posición de la capa es relativa a el lugar donde se estaba escribiendo en la página en el momento de escribir la capa con su etiqueta
- absolute indica que la posición de la capa se calcula con respecto al punto superior izquierdo de la página.

Atributo top

Indica la distancia en vertical donde se colocará la capa. Si el atributo position es absolute, top indica la distancia del borde superior de la capa con respecto al borde superior de la página. Si el atributo position era relative, top indica la distancia desde donde se estaba escribiendo en ese momento en la página hasta el borde superior de la capa.

Atributo left

Básicamente funciona igual que el atributo top, con la diferencia que el atributo left indica la distancia en horizontal a la que estará situada la capa.

Atributo height

Sirve para indicar el tamaño de la capa en vertical, es decir, su altura.

Atributo width

Indica la anchura de la capa

Atributo visibility

Sirve para indicar si la capa se puede ver en la página o permanece oculta al usuario. Este atributo puede tener tres valores.

- visible sirve para indicar que la capa se podrá ver.
- hidden indicará que la capa está oculta.
- inherit es el valor por defecto, que quiere decir que hereda la visibilidad de la capa donde está metida la capa en cuestión. Si la capa no está metida dentro de ninguna otra se supone que está metida en la capa documento, que es toda la página y que siempre está visible.

Atributo z-index

Sirve para indicar la posición sobre el eje z que tendrán las distintas capas de la página. Dicho de otra forma, con z-index podemos decir qué capas se verán encima o debajo de otras, en caso de que estén superpuestas. El atributo z-index toma valores numéricos y a mayor z-index, más arriba se verá la página.

Atributo clip

Es un atributo un poco difícil de explicar. En concreto sirve para recortar determinadas áreas de la capa y que no se puedan ver. Una capa que está visible se puede recortar para que se vea, pero que no se vea algún trozo de esta. El cliping se indica por medio de 4 valores, con esta sintaxis.

rect (<top>, <right>, <bottom>, <left>)

Los valores <top>, <right>, <bottom> y <left> indican distancias que se pueden apreciar en este esquema.

Esquema de los atributos de cliping de una capa DHTML

Este es un ejemplo de capa que utiliza todos los atributos que hemos visto en este artículo y alguno más para aplicar estilo a la capa.

<div style="clip: rect(0,158,148,15); height: 250px; width: 170px; left: 10px; top: 220px; position: absolute; visibility: visible; z-index:10; font-size: 14pt; font-family: verdana; text-align: center; background-color: #bbbbbb">

Esta capa tiene un cliping, por eso se ve entrecortada.
<br>
<br>
Esto es una capa de prueba

</div>

Puede verse el ejemplo en una página web, donde también podrá apreciarse el efecto conseguido al realizar el cliping.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Sergio Olmos

26/12/2001
He estado programando una página con capas y al probarla me he dado cuenta que las capas se ven en distinta posición en unos navegadores y otros.

Para arreglarlo he pensado en tres posibilidades, aunque ninguna me acaba de convencer al 100%.

- Puedes poner las capas para que se ve medio bien en todos los navegadores, poniéndolas a medio camino entre las dos configuraciones.

- Puedes escribir otra vez tu código para ver si no te pasa eso en la nueva página

- Puedes detectar el navegador y con javascript mueves las capas a una u otra posición dependiendo del navegador.

Si alguna persona se le ocurre alguna otra ayuda estaría genial que la apuntara como comentario al artículo.

Fernando

04/9/2002
No lo he hecho, pero se me ocurre medir la diferencia de las cohordenadas entre ambos navegadores y programar una función que haga el ajuste en función del navegador (pero sin tener que volver a programar la página). Con esto sólo tendríamos que llamar a nuestra función e indicar las cohordenadas deseadas cada vez que querramos crear una capa.

francisco J.Sánchez

14/9/2003
Se puede hacer la hoja de estilo en PHP y luego enlazarla con la etiqueta <lynk rel="Stylesheet" href="estilo.php" type="text/css"> puesta en la cabecera (head) del HTML. Con php puedes detectar el navegador y generarla específicamente.

Guru

03/8/2004
centren una capa madre del tamaño del campo de trabajo, dentro de esta, trabajen con lo que quieran dando las cordenadas en función de esta capa madre no de la pantalla, hagon todo el código y luego lo encierran dentor de una capa sin atributos

jaime

21/2/2005
hola... tengo problemas con el posicionamiento de unas capas... quiero traer al frente pero lo que pasa es q hay un boton flash que queda por sobre esta... con la propiedadz-index puedo controlar el orden pero entre capas.. pero que hago con ese boton flash???

agradeceria de tu ayuda chaus

Arturo

12/1/2006
Es importante resaltar que para que la propiedad Z-INDEX funcione debe estar también incluido el valor POSITION, ya que si las capas están sin posicionar no se puede establecer un orden en el eje Z.

Juan

14/3/2009
Solo por conseguir dinero hacen estas paginas tan pobres en contenido

saluds

wilber

23/4/2010
urgente
tengo una pagina web el cuerpo esta dividido en tres capas izquierda derecha principal en la izquierda tengo menu desplegable hecho en css en la principal una imagen en problema es q el menu desplegable se ve debajo de la capa principal