Cuando trabajamos una web y aparecen problemas con la ubicación de los items, varias veces se debe a que los contenidos quedan mal apilados. Por ejemplo hacemos un menu en css y un swf con noticias pero el menu se despliega hacia abajo y los items son tapados por el swf. Otra ocasión es cuando queremos superponer cosas: Ya sean imágenes, textos o incluso películas flash.

¿Como ordena CSS el orden de apilación?

Por medio de la propiedad z-index y de la propiedad position de CSS podemos ordenar los elementos de nuestra página a nuestro gusto. Lo mas recomendado para esta propiedad es incluirla en divs.

¿Cómo funcionan las propiedades z-index y position?

Z-index:

El valor de z-index indica la posición de profundidad (capa) de u objeto en la página. Los elementos con valores positivos son apilados encima de uno con valores negativos, menores, o no especificados. Dos objetos con el mismo z-index son organizados dependiendo de la colocación de sus etiquietas. Un valor negativo posiciona el objeto debajo de otro que no lo tenga definido. Para remover el efecto, se retira o se cambia el parametro a null.

Nota: La propiedad z-index solo aplica a elementos que tengan la propiedad position en absolute o relative.

Position:

Esta propiedad se utilice junto con el z-index para crear capas. Si se pone en absolute, esta propiedad ignorará la posición de los otros objetos en la página y no los afectará, ni ellos al objeto con la propiedad. Entonces causara un overlapping (apilación). Esta apilación se controla con el z-index. Los elementos con position:absolute no tienen margenes pero sí bordes y padding.Si ponemos position:relative, entonces el objeto (o el div) se acoplará al documento sin causar overlap.

¿Como uso estos códigos?

Al usar estas propiedades, crearas algo que Dreamweaver llama "capas". Son capas ya que no interfieren con otras partes del documento, ni son afectadas por ellas. Ahora veremos como aplicar esto a un div (en XHTML):

<html>


<head>

<title>Prueba de overlapping</title>

<style type="text/css"> 

#capa1{ position:absolute; z-index:1; } 

</style>

</head>

<body>

<div id="capa1"> Texto con z-index de 1 </div>

</body>

</html>

Ya creamos la primera capa, ahora creemos la segunda conteniendo una imagen (busquen una imagen cualquier lo bastante grande), que ira debajo del texto. Le ponemos color de fondo a la capa 1 para que no se pierda el texto.

<html>


<head>

<title>Prueba de overlapping</title>

<style type="text/css"> 

#capa1{ position:absolute; z-index:1; background-color:#FFFFFF; }
#capa2{ position:absolute; z-index:0; } 


</style>

</head>

<body>

<div id="capa1"> Texto con z-index de 1 </div>

<div id="capa2"> <img src="imagen.jpg" /> </div>

</body>

</html>

Así ha de ir nuestra pagina

Tambien podemos especificarle una posicion a las capas y su ancho y alto:

<html>


<head>

<title>Prueba de overlapping</title>

<style type="text/css">

#capa1{ position:absolute;

 z-index:1;

 background-color:#FFFFFF;

 top:100px;

 left:300px;

 width:300px;

 height:12px;

}

#capa2{

 position:absolute;

 z-index:0;

}

</style>

</head>

<body>

<div id="capa1"> Texto con z-index de 1 </div>

<div id="capa2"> <img src="imagen.jpg" /> </div>

</body>

</html>

Nuestra pagina debe verse similar a ésta imagen.

Ahora veamos como se le hace overlapping a dos swf cualquiera (Ver ejemplo del tutorial, abajo): Primero se crean dos capas, una con mayor z-index que la otra, y se ingresa el código para insertar tu swf. Despues ajustamos el parámetro para que nuestro swf sea transparente:

<html>


<head>

<title>Prueba de overlapping</title>

<style type="text/css"> 

#peliarriba{ position:absolute; z-index:1; } #peliabajo{ position:absolute; z-index:0; } 

</style>

</head>

<body>

<div id="peliarriba">

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400">

    <param name="movie" value="circulo-peque.swf" />

    <param name="quality" value="high" />

    <param name="wmode" value="transparent" />

    <embed wmode="transparent" src="circulo-peque.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>

  </object>

</div>

<div id="peliabajo">

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400">

    <param name="movie" value="circulo-grande.swf" />

    <param name="quality" value="high" />

    <param name="wmode" value="transparent" />

    <embed wmode="transparent" src="circulo-grande.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>

  </object>

</div>

</body>

</html>

Aunque no parezca, cada circulo es un SWF independiente superpuesto. Ver ejemplo para más detalles.

Advertencia: Ya sabes que hacer un swf transparente puede hacer la navegacion lenta, asi que imagina dos swf superpuestos y transparentes. En este caso el overlapping debe ser usado con peliculas pequeñas.

Felicidades, ya pueden hacer capas en HTML y XHTML usando CSS. Espero que tengan suerte haciendolo ya que es bastante útil. Con capas no tendran tanto problema en compatibilidad con otros navegadores si especifican la altura y ancho asi como la posición. Si ven el ejemplo pueden ver que con los swf el elemento de atrás no es accesible asi el fondo sea transparente.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información

lunes, 28 de diciembre de 2015

Superposición de objetos de HTML (overlapping) con CSS

¿Como ordena CSS el orden de apilación?

Por medio de la propiedad z-index y de la propiedad position de CSS podemos ordenar los elementos de nuestra página a nuestro gusto. Lo mas recomendado para esta propiedad es incluirla en divs.

¿Cómo funcionan las propiedades z-index y position?

¿Como uso estos códigos?

No hay comentarios:

Publicar un comentario

Entradas populares