Posicionamiento

El posicionamiento con CSS permite, mximo control sobre el lugar que cada elemento de una pgina Web ocupar dentro de la propia pgina, sus condiciones de visibilidad y "flotabilidad", as como manejo de capas.

CSS Positioning: propiedades

Posicionamiento
PROPIEDAD position left top height width visibility z-index clip overflow VALORES absolute | relative | static | fixed Tamao | porcentaje | auto Tamao | porcentaje | auto Tamao | porcentaje | auto Tamao | porcentaje | auto visible | hidden | inherit auto | nmero (1,2,3, ...) rect (top, right, bottom, left) visible | hidden | scroll | auto SIGNIFICADO Permite indicar el tipo de posicionamiento del elemento Distancia del elemento al borde izquierdo, posicionado absoluta o relativamente Distancia al borde superior, elemento posicionado absoluta o relativamente Altura del elemento Anchura del elemento Controla la visibilidad Control de capas, para elementos posicionados absoluta o relativamente Define el rea visible del elemento Especifica el comportamiento de las partes que exceden del tamao de la caja

Propiedad Position
La propiedad position admite cinco valores: absolute, relative, static, fixed y inherit. Por defecto es static.

static (esttico)
Es el valor por defecto de todos los elementos HTML, y por tanto no hace falta especificarlo. Los elementos en posicin esttica se van dibujando uno a continuacin de otro, segn las reglas ordinarias, fluyendo con la pgina. Cada uno tiene su espacio, se distribuyen de arriba abajo y de izquierda a derecha, insertando saltos de lnea dependiendo si son elementos de bloque o de lnea. 9 Creamos una pgina nueva llamada posi.html, con una hoja de estilo interna, por ms comodidad. 9 Al inicio colocamos una frase que sirva de encabezado de la pgina, usando <h1>. 9 A continuacin un <div> con identificador (<div id=prime>), y dentro de este colocamos: Una frase en un prrafo. Una imagen (cascada.jpg), con sus atributos de ancho, alto y ttulo. Otra frase, en un prrafo. 9 Al final, en un <div> independiente, escribir un texto, ponerle como identificador final. 9 Darle algunos formatos, pero por ahora con posicionamiento esttico. 9 Validar y probar la pgina.

absolute (absoluto)
Para posicionar el elemento con respecto a la esquina superior izquierda de la ventana del navegador, tendremos que declarar que su posicin es absoluta. Una vez hecho esto, podemos indicar la distancia con respecto a la mencionada esquina del navegador (top y left). Estos atributos no se pueden aplicar si la caja tiene posicionamiento esttico, ya que en ese caso carecen de lgica. 17

Con este posicionamiento el elemento es sustrado del flujo de la pgina, y los dems se colocan como si no existiese. Comienza el espectculo: 9 A la capa #prime, le ponemos posicin absoluta, y probamos con distintas distancias respecto a la esquina del navegador. div#prime { position:absolute; left:100px; top:50px; } 9 Qu pasa con el bloque identificado como final?

relative (relativo)
El posicionamiento relativo es una especie de modo intermedio, entre el posicionamiento esttico y el absoluto. Si declaramos que un elemento tiene posicionamiento relativo, su esquina superior izquierda se situar all donde le corresponda segn el cdigo XHTML (al igual que las cajas estticas). Pero adems podremos desplazar la caja siguiendo el modelo absoluto; lo que cambia es la coordenada de la esquina superior izquierda del elemento (donde empieza a dibujarse). Contina el espectculo: 9 Entre los dos <div> que tenemos, vamos a insertar otro, que identificaremos como chicos. Contendr una imagen con el fondo transparente (chicos_trans.gif) ponerle una frase al final. 9 Inicialmente no le aplicamos estilos, y observamos la posicin que le corresponde con un flujo normal. 9 Ajustar la posicin absoluta de la primera imagen para que se solapen al menos en parte. 9 Para traernos la segunda imagen al primer plano: #chicos { position:relative; z-index:1; } 9 Y z-index de la primera a 0. 9 Ahora que sabemos la posicin que le correspondera en un flujo normal, podemos cambirsela a nuestro gusto, usando las propiedades top y left. Ms difcil todava 9 Copiamos el <div> de los chicos, anidndolo en el primer <div> prime, despus de la 1 imagen, slo le cambiamos la frase del pie de la 2 imagen, para saber cual es cual. 9 Qu pas con la imagen del <div> anidado? Se le ha aplicado a las dos copias el mismo estilo. Por qu no estn en la misma posicin? 9 Quitmosle el identificador a la capa anidada, para averiguar la posicin que le correspondera. 9 Ahora que sabemos su posicin podemos cambiarla: div div{ /* Se aplica slo a los div anidados */ position:relative; top:-120px; left:500px; }

fixed (fijo)
Este tipo de posicionamiento no se usa demasiado, ya que el navegador ms utilizado, Internet Explorer, no lo soporta (en IE8 s) http://www.tierradenomadas.com/rc012.phtml Una vez dibujada la caja en la posicin que le corresponda, si el usuario hace scroll en la pgina, la caja se quedar en pantalla en la misma posicin. 18

9 Aplicamos propiedades de estilo al encabezado <h1>, y vamos probando: Lo ponemos fijo y le aplicamos las propiedades ancho y alto, tambin se puede centrar el texto. z-index a 3 para que est sobre lo anterior. Le definimos su posicin con top y left.

Propiedad clip
No afecta al espacio ocupado por el elemento en el flujo HTML. Sirve para marcar un rectngulo dentro de una capa visible. Slo se ver el rectngulo marcado. Se indica por medio de 4 valores, con esta sintaxis: rect (top, right, bottom, left). Observaciones: Si le quitamos las comas funciona en IE, pero slo en posicionamiento absoluto. No funciona con posicionamiento relativo. top left bottom right Zona Visible Capa

9 Recortar una capa con texto y otra que contenga una imagen. 9 En una pgina distinta copiar el siguiente cdigo, y aplicarle las propiedades necesarias para que aparezca similar al de la imagen.
<body> <div id="sombra">Yo soy el t&iacute;tulo de la p&aacute;gina</div> <div id="fijo">Yo soy el t&iacute;tulo de la p&aacute;gina</div> <div id="debajo" onmouseover="getElementById('opaca').style.visibility='hidden';" onmouseout="getElementById('opaca').style.visibility='visible';"> Se supone que yo me encuentro debajo, mi z-index es 2, en fin la vida es as&iacute;.<br /> Unas veces est&aacute;s arriba y otras est&aacute;s abajo.<br />Me han puesto por nombre DEBAJO. </div> <div id="transp">Yo soy TRANSParente, porque no tengo color de fondo.<br /> Pero mi texto, que al fin y al cabo es lo que importa se ve.<br /> Tengo z-index 3.<br /> Salgo encima de la compa&ntilde;era de DEBAJO pero soy muy respetuosa y no la tapo. </div> <div id="opaca">Yo soy la m&aacute;s chula, pues llego la &uacute;ltima y me coloco arriba y encima.<br /> Ya lo dec&iacute;an, los &uacute;ltimos ser&aacute;n los primeros.<br /> Mi z-index es de 4.<br /> Por eso salgo encima de todas y me llamo OPACA por tener color de fondo. </div> <p id="vocal"> <script type="text/javascript"> for (x = 0; x < 200; x++) {document.write('A e i o u ');} </script> </p> </body> </html>

19

9 Realizar los ejercicios propuestos en desarrolloweb sobre maquetacin, en una pgina diferente: http://www.desarrolloweb.com/articulos/1823.php http://www.desarrolloweb.com/articulos/1824.php http://www.desarrolloweb.com/articulos/1825.php http://www.desarrolloweb.com/articulos/1842.php http://www.desarrolloweb.com/articulos/1843.php

20