You are on page 1of 4

Posicionamiento

El posicionamiento con CSS permite, máximo control sobre el lugar que cada elemento de una página Web ocupará dentro de la propia página, 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 Tamaño | porcentaje | auto Tamaño | porcentaje | auto Tamaño | porcentaje | auto Tamaño | porcentaje | auto visible | hidden | inherit auto | número (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 tamaño de la caja

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

static (estático)
Es el valor por defecto de todos los elementos HTML, y por tanto no hace falta especificarlo. Los elementos en posición estática se van dibujando uno a continuación de otro, según las reglas ordinarias, fluyendo con la página. Cada uno tiene su espacio, se distribuyen de arriba abajo y de izquierda a derecha, insertando saltos de línea dependiendo si son elementos de bloque o de línea. 9 Creamos una página nueva llamada “posi.html”, con una hoja de estilo interna, por más comodidad. 9 Al inicio colocamos una frase que sirva de encabezado de la página, usando <h1>. 9 A continuación un <div> con identificador (<div id=”prime”>), y dentro de este colocamos: ƒ Una frase en un párrafo. ƒ Una imagen (cascada.jpg), con sus atributos de ancho, alto y título. ƒ Otra frase, en un párrafo. 9 Al final, en un <div> independiente, escribir un texto, ponerle como identificador “final”. 9 Darle algunos formatos, pero por ahora con posicionamiento estático. 9 Validar y probar la página.

absolute (absoluto)
Para posicionar el elemento con respecto a la esquina superior izquierda de la ventana del navegador, tendremos que declarar que su posición 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 estático, ya que en ese caso carecen de lógica. 17

ya que el navegador más utilizado. 9 Inicialmente no le aplicamos estilos.gif) ponerle una frase al final. left:500px. para averiguar la posición que le correspondería. anidándolo en el primer <div> “prime”. si el usuario hace scroll en la página. Continúa el espectáculo: 9 Entre los dos <div> que tenemos. y los demás se colocan como si no existiese. Internet Explorer. } 9 Y z-index de la primera a 0. y observamos la posición que le corresponde con un flujo normal. 9 Ahora que sabemos su posición podemos cambiarla: div div{ /* Se aplica sólo a los div anidados */ position:relative. 9 Ahora que sabemos la posición que le correspondería en un flujo normal. sólo le cambiamos la frase del pie de la 2ª imagen. Pero además podremos desplazar la caja siguiendo el modelo absoluto. } 9 ¿Qué pasa con el bloque identificado como “final”? relative (relativo) El posicionamiento relativo es una especie de modo intermedio. que identificaremos como “chicos”. podemos cambiársela a nuestro gusto. Comienza el espectáculo: 9 A la capa #prime. le ponemos posición absoluta.com/rc012. su esquina superior izquierda se situará allí donde le corresponda según el código XHTML (al igual que las cajas estáticas).Con este posicionamiento el elemento es sustraído del flujo de la página. top:50px. entre el posicionamiento estático y el absoluto. para saber cual es cual. 9 Para traernos la segunda imagen al primer plano: #chicos { position:relative. Contendrá una imagen con el fondo transparente (chicos_trans. div#prime { position:absolute. 9 Ajustar la posición absoluta de la primera imagen para que se solapen al menos en parte.phtml Una vez dibujada la caja en la posición que le corresponda. no lo soporta (en IE8 sí) http://www. Si declaramos que un elemento tiene posicionamiento relativo. Más difícil todavía 9 Copiamos el <div> de los “chicos”. z-index:1. y probamos con distintas distancias respecto a la esquina del navegador. ¿Por qué no están en la misma posición? 9 Quitémosle el identificador a la capa anidada. usando las propiedades top y left. top:-120px.tierradenomadas. lo que cambia es la coordenada de la esquina superior izquierda del elemento (donde empieza a dibujarse). después de la 1ª imagen. vamos a insertar otro. la caja se quedará en pantalla en la misma posición. } fixed (fijo) Este tipo de posicionamiento no se usa demasiado. 18 . left:100px. 9 ¿Qué pasó con la imagen del <div> anidado? Se le ha aplicado a las dos copias el mismo estilo.

<br /> Mi z-index es de 4. top left bottom right Zona Visible Capa 9 Recortar una capa con texto y otra que contenga una imagen. Observaciones: ª Si le quitamos las comas funciona en IE. ª No funciona con posicionamiento relativo.ltima y me coloco arriba y encima."> Se supone que yo me encuentro debajo.} </script> </p> </body> </html> 19 .<br /> Ya lo dec&iacute.<br /> Unas veces est&aacute.visibility='visible'. pues llego la &uacute.<br /> Pero mi texto. <body> <div id="sombra">Yo soy el t&iacute. x < 200.ltimos ser&aacute.<br /> Tengo z-index 3.gina</div> <div id="fijo">Yo soy el t&iacute.s abajo.9 Aplicamos propiedades de estilo al encabezado <h1>.n los primeros.style.<br /> Por eso salgo encima de todas y me llamo OPACA por tener color de fondo. y vamos probando: ƒ Lo ponemos fijo y le aplicamos las propiedades ancho y alto.s arriba y otras est&aacute. Sólo se verá el rectángulo marcado.<br /> Salgo encima de la compa&ntilde. ƒ Le definimos su posición con top y left. en fin la vida es as&iacute. </div> <div id="transp">Yo soy TRANSParente. </div> <div id="opaca">Yo soy la m&aacute..<br />Me han puesto por nombre DEBAJO. los &uacute. también se puede centrar el texto. Sirve para marcar un rectángulo dentro de una capa visible.era de DEBAJO pero soy muy respetuosa y no la tapo. pero sólo en posicionamiento absoluto. porque no tengo color de fondo. bottom. con esta sintaxis: rect (top. ƒ z-index a 3 para que esté sobre lo anterior." onmouseout="getElementById('opaca').an. x++) {document.write('A e i o u '). mi z-index es 2. right.style. Propiedad clip No afecta al espacio ocupado por el elemento en el flujo HTML.visibility='hidden'.tulo de la p&aacute. que al fin y al cabo es lo que importa se ve. 9 En una página distinta copiar el siguiente código. </div> <p id="vocal"> <script type="text/javascript"> for (x = 0. y aplicarle las propiedades necesarias para que aparezca similar al de la imagen.s chula. left).tulo de la p&aacute.gina</div> <div id="debajo" onmouseover="getElementById('opaca'). Se indica por medio de 4 valores.

php http://www.desarrolloweb.php http://www.php http://www.9 Realizar los ejercicios propuestos en desarrolloweb sobre maquetación.com/articulos/1824.com/articulos/1843. en una página diferente: http://www.desarrolloweb.php 20 .com/articulos/1825.php http://www.com/articulos/1842.desarrolloweb.desarrolloweb.desarrolloweb.com/articulos/1823.