Ubicando elementos usando CSS (3ª parte)

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?

• PRIMERO
  • Item 1
  • Item 2
  • Item 3
• SEGUNDO
  • Item 1
  • Item 2
  • Item 3
• TERCERO
  • Item 1
  • Item 2
  • Item 3

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>