lunes, 21 de septiembre de 2009

Superponer un elemento o capa a otro con z-index con CSS

En ocasiones se superponen elementos tales como div, imagenes etc... ya que los posicionas en un mismo lugar que estaba otro, cuando pasa eso siempre se verá el pimer elemento que pusiste, si deseas modificar esto lo puedes hacer con CSS mediante z-index, con ello determinarás la posición z del elemento de forma que cuanto mayor sea menor profundidad tendrá.

un ejemplo sería este:

<div style="background-color:blue;width:100px;height:100px;z-index:1;position:relative"></div>
<div style="background-color:yellow;width:100px;height:100px;position:absolute;top:30px;left:30px"></div>


Como ves la primera capa tiene la posicion relativa y z-index a '1', por defecto estan a '0', con poner algo más ya estará superpuesto al otro.

2 comentarios:

  1. Muy útil, me solucionó un problema que me volvía loco con esta página http://www.deslengua2.com

    ResponderEliminar