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 serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

11 comentarios:

  1. Este comentario ha sido eliminado por el autor.

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

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

    ResponderBorrar
  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

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

    ResponderBorrar
  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"?

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

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

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

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[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.