miércoles, 6 de julio de 2011

Aprendiendo a diseñar con DIV y CSS Parte 2: Position absolute y relative


La otra forma de diseñar mediante etiquetas DIV despues de las populares float y clear que vimos en el anterior artículo es mediante la propiedad CSS position, que básicamente "posiciona" un contenedor o elemento de bloque en cualquier lugar de la página, lo único que se requiere es un referente a partir del cual se posicionará.

Todos los referentes son aquellos elementos que tiene la propiedad position:relative asignada. Además se usa la propiedad z-index:valor, para que dichas capas que literalmente se enciman sobre otras tengan un orden según el número asignado, como capas en programas como Photoshop entre más alto el valor más arriba estará la capa de otros elementos.

Se llama z-index porque figurativamente corresponde al eje axial espacial Z (largo/grosor), mientras que el eje X es igual al ancho e Y al alto.

Además debemos usar las propiedades left:valor, right:valor, top:valor y bottom:valor para, a partir de que punto, ya sea arriba-derecha, arriba-izquierda, abajo izquierda y abajo-derecha, deberán posicionarse.

Reglas del diseño por position y z-index
  • Los elementos deberán tener obligatoriamente un referente DIV esto evita que se muevan o se oculten si la resolución de pantalla es inferior al elemento posicionado, además, podemos usar cada una de las equinas de dicho DIV como referentes de distancia. El contenedor tiene la propiedad position:relative;
  • Los elementos posicionados deben tener la propiedad position:absolute;
  • Los elementos que se posicionen deberían tener asignado la propiedad CSS z-index que evite obligue a que se superpongan sin estorbarse.
  • Los elementos posicionados se controlan con las propiedades CSS; left/top, left/bottom, right/top o right/bottom.
  • Si no pone un valor position:relative, el navegador usará la resolución actual de pantalla, si el sitio web es más grande que la resolución de la pantalla y los elementos posicionados exceden el tamaño de la resolución, quedarán ocultos salvo que se escale la página web, las barras de desplazamiento no servirán para mostrarlos
Por ejemplo, en este código un div rojo (contenedor) contiene a otro negro (objetoposicionado) y al usar position absolute, este flota sobre el contenedor y usa las esquinas izquierda (left) / superior (top) para controlar su separación, pero podemos usar left/bottom, right/top o right/bottom, algo bastante útil en contenedores de tamaño variable.
<div class="contenedor" style="position:relative">
<div class="objetoposicionado" style="position:absolute;left:-40px; top:-50px;z-index:2;">
</div>
</div>

left, right, top y bottom
En los valores left, top, bottom y right podemos usar números negativos para sacar del contenedor el elemento con position:absolute. Los elementos de clase contenedor y objetoposicionado que son del CSS que no se ve, agregan parámetros como alto, ancho y color de fondo que aquí no ponemos para que no estorben en la comprensión del ejercicio.

Si agregamos un segundo div, con la clase objetoposicionado2, este estará alineado a la derecha (right) y arriba (top):
<div id="contenedor" style="position:relative">
<div class="objetoposicionado" style="position:absolute;left:-40px; top:-50px;z-index:2;">
</div>
<div class="objetoposicionado2" style="position:absolute;right:-40px; top:-50px;z-index:3;">
</div>
</div>


z-index
Si notaron bien, en el código del cuadro negro tiene asignado en z-index el valor 2, mientras que en el cuadro azul es 3, el que tiene el valor más alto se superpone al z-index más bajo.

Cuatro div alineados a cada esquina
Como se ve en el ejemplo de abajo, cada esquina del div contenedor se usa como referencia para alinear a los div posicionados con absolute, que a su vez usan sus propias esquinas para alinearse, esto significa si ponemos el valor de right (derecha) y bottom (abajo) a 0 el cuadro posicionado se alineara su esquina inferior-derecha con la esquina inferior-derecha del contenedor:
<div id="contenedor" style="position:relative">
<div class="objetoposicionado" style="position:absolute;left:-40px; top:-40px;z-index:2;">
</div>
<div class="objetoposicionado2" style="position:absolute;right:-40px; top:-40px;z-index:3;">
</div>
<div class="objetoposicionado3" style="position:absolute;left:-40px; bottom:-40px;z-index:4;">
</div>
<div class="objetoposicionado4" style="position:absolute;right:-40px; bottom:-40px;z-index:5;">
</div>
</div>

Es necesario indicar que podemos posicionar elementos sin necesidad de z-index, solamente es necesario si existen elementos que en algún momento podrían superponerse.

Viene de:
  1. Aprendiendo a diseñar con DIV y CSS Parte 1: Float y Clear

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

11 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Eso es simple el contenedor posicionado no tienen una medida fija, debes establecer un valor Width.

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. Te sugiero uses Chrome y des clic derecho sobre el objeto en cuestión y del menú elije "Inspeccionar objeto", eso te orientará, pues te dice el estilo asignado, por ejemplo a un DIV o a un SPAN.

    Cuando flotes un objeto con position:absolute; todos tus elementos debe tener establecida la propiedad width, como width:200px; es a lo que me refiero.

    No recuerdo el código, ni me parece correcto que me pidas que te haga la tarea, no es el propósito de mi blog.

    Saludos

    ResponderEliminar
  5. Por favor, sigue haciendo tutoriales. ¡Son geniales!

    ResponderEliminar
  6. Tengo una pregunta que puede sonar estúpida... pero, en los ejemplos de código, ¿No debería ser "right" en vez de "rigth"?

    ResponderEliminar
    Respuestas
    1. Sipi, ya sabes, es lo que pasa cuando escribes código a pelo.

      Eliminar
  7. excelente, todo muy bien explicado, ojala puedes seguir integrando mas temas, saludos.

    ResponderEliminar
  8. ¡Wow! Simplemente bien explicado. Gracias.

    ResponderEliminar

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com