JMiur [E]

Las propiedades CSS que permiten posicionar un elemento en un lugar distinto al que naturalmente le corresponde son left y top pero, para que funcionen, debemos también el valor de la propiedad position como absolute o relative.

Lo habíamos visto, un código como este:
<img style="position: relative; left: 50px; top: 80px;" src="imagen" />
<div style="background-color: LightSteelBlue; color: black;">Lorem ipsum dolor sit ...</div>
Genera esto:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

La imagen que, normalmente estaría arriba a la izquierda, se desplaza y, queda arriba del DIV.

Pongamos más elementos, por ejemplo, cuatro imágenes con diferentes parámetros:
<img src="imagen_1" style="position: relative; top: 50px; left: 20px;"/>
<img src="imagen_2" style="position: relative; top: 60px; left: 50px;"/>
<img src="imagen_3" style="position: relative; left: 100px; top: -110px;"/>
<img src="imagen_4" style="position: relative; left: -30px; top: -180px;"/>





Las coordenadas left y top mueven la imagen pero la primera quedará debajo y la cuarta arriba, es decir, cada una de ella se superpondrá con la otra porque ese es el orden que le damos en el código. El navegador lee la primera, la muestra, lee la segunda, la coloca encima, y así sucesivamente. En términos simple, las apila; en términos sofisticados, les da un número de orden en el stack; un número menor implica una posición inferior (está abajo), un número mayor implica una posición superior (está arriba).

Esta posición puede ser modificada utilizando CSS, para eso, existe una propiedad específica llamada z-index y que, al igual que las otras, sólo funciona cuando se establece la propiedad position como absolute o relative.

Con esta propiedad, podemos determinar el orden en que se apilan los elementos y acepta valores tanto positivos como negativos:


Usemos el mismo código pero agreguemos valores la propiedad z-index a la imagen 2 para que aparezca por encima de las otras:
<img src="imagen_1" style="position: relative; top: 50px; left: 20px;"/>
<img src="imagen_2" style="z-index: 1; position: relative; top: 60px; left: 50px;"/>
<img src="imagen_3" style="position: relative; left: 100px; top: -110px;"/>
<img src="imagen_4" style="position: relative; left: -30px; top: -180px;"/>





¿Por qué un valor de 1? Simplemente porque si la propiedad no está establecida (si no la ponemos) no se tiene en cuenta, es como fuera cero.

Usemos dos imágenes y coloquemos el valor de z-index en ambas:
<img  src="imagen1" style="z-index:1; position: relative; top: 50px; left: 50px;" />
<img src="imagen2" style="z-index:2; position: relative; top: 0px; left: 0px;" />


Y al revés:
<img  src="imagen1" style="z-index:2; position: relative; top: 50px; left: 50px;" />
<img src="imagen2" style="z-index:1; position: relative; top: 0px; left: 0px;" />



Los valores del z-index pueden ser cambiados utilizando JavaScript utilizando cualquier evento:
onclick="getElementById('nombre').style.zIndex=valor;"
En este ejemplo, haciendo click sobre las mismas cuatro imágenes, la ponemos en primer plano:





¿Acaso con estas propiedades se podría construir un menú desplegable con sencillez?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Sólo un adelanto:


El código CSS:
<style type="text/css">
.demoLista {
background-color: CornflowerBlue;
}
.demoLista ul {
list-style: none;
position: relative;
}
.demoLista ul li {
display: inline;
position: relative;
}
.demoLista ul li a {
color: black;
font-size: 16px;
padding: 0 10px;
text-align: center;
}
.demoLista ul li ul {
background-color: RoyalBlue;
border: 1px solid #6495ED;
display: none;
left: 0px;
position: absolute;
top: 8px;
width: 120px;
}
.demoLista ul li:hover ul {
display: block;
}
.demoLista ul li ul li {
color: white;
display: block;
padding: 2px 10px;
}
</style>
El código HTML:
<div class="demoLista">
<ul>
<li>
<a href="javascript:void(0);">PRIMERO</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">SEGUNDO</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">TERCERO</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</div>

10 comentarios:

La Blogueria  

Me encanta el menú. Voy a probar a hacer uno con transparencias e imagenes tontas. Gracias.

Responder
JMiur  

Hay que pelearse un poco con las propiedades para que funcione correctamente en IE y Firefox pero es posible; incluso, pueden crearse submenues de los items; todo es cuestión de paciencia y prueba y error.

Responder
Zixem  

La imagen que explica el orden de los elementos tiene un error.

En la parte superior dice "Un valor menor implica que el elemento está más CERCA del fondo".

Y en la parte inferior dice "Un valor mayor implica que el elemento está más CERCA del fondo".

Responder
JMiur  

Ya está solucionado.

Responder
Gem@  

Eres tremendo, no sé si está expresión tendrá el mismo significado en tu tierra que aquí en la mía, pero aparte de genial que te lo digo siempre no encontraba otra palabra para describirte.

Responder
JMiur  

Gracias Gema@ pero lo cierto es que son propiedades muy poderosas y muy poco usadas por el común de los mortales como nosotros. Realmente permiten hacer cosas interesantes.

Responder
Pablo [BetaDir]  

Excelente! la verdad no lo sabia :)

Responder
Jhon  

Hola Jmiur

Este es el tercer bloggs de 3 que lanzaste, se que es un un poco o muy tarde para decirte esto:
Cada ves que quiero ver la primera parte o la segunta de estos blog
me cuasta mucho trabajo encontrarlo
porque no hayo un hipervinculos entre ellos.

Podrias informarme como puedo acceder a estos 3 articulos de
forma facil , ya que vas a publicar varios sobre CSS (background) y JavaScrip y deseo
a partir de ellos crear un Manual

Gracias

Atte
Juan Pua.

Responder
JMiur  

Son estos:
Parte 1
Parte 2

Responder
SENA Ptyo. Arapaima  

quiero que me colabores con el codigo de un menu desplegable

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR