Foros del Web » Creando para Internet » CSS »

Hacer visible un Div sobre un iframe

Estas en el tema de Hacer visible un Div sobre un iframe en el foro de CSS en Foros del Web. Hola.. mi problema es el siguiente.. Tengo un iframe.. Al que me gustaria ponerle un div sobre este para decorarlo.. Ya posicione mi div con ...
  #1 (permalink)  
Antiguo 29/05/2011, 13:09
 
Fecha de Ingreso: octubre-2010
Ubicación: Buenos Aires
Mensajes: 125
Antigüedad: 6 años, 3 meses
Puntos: 11
Hacer visible un Div sobre un iframe

Hola.. mi problema es el siguiente.. Tengo un iframe.. Al que me gustaria ponerle un div sobre este para decorarlo.. Ya posicione mi div con position relative y en dreamweaver me los muestra bien.. Pero cuando voy al navegador me muestra el iframe y el div no se ve.. La duda es la siguiente.. Como hago para hacer un div visible arriba de un iframe? Es posible? Saludos..

HMTL
<div id="data">
<iframe frameborder='0' height='470' src='blabla' width='300'>
<div class="tapa">Esto es para decorar el iframe</div>
</div>

CSS
#data {width:300px; height:470px; float:left; position:relative}
.tapa {width:200px; height:50px; background-color:#FF0000; position:relative; margin-top:50px; visibility: visible}
  #2 (permalink)  
Antiguo 29/05/2011, 14:17
 
Fecha de Ingreso: marzo-2011
Mensajes: 54
Antigüedad: 5 años, 10 meses
Puntos: 11
Respuesta: Hacer visible un Div sobre un iframe

Prueba con asignarle al div la función z-index de Css ;)
http://www.w3schools.com/css/pr_pos_z-index.asp
  #3 (permalink)  
Antiguo 29/05/2011, 16:05
 
Fecha de Ingreso: octubre-2010
Ubicación: Buenos Aires
Mensajes: 125
Antigüedad: 6 años, 3 meses
Puntos: 11
Respuesta: Hacer visible un Div sobre un iframe

Probe pero no me andubo ¬¬
Gracias iwal por contestar ;)
  #4 (permalink)  
Antiguo 29/05/2011, 22:46
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 7 años, 7 meses
Puntos: 1512
Respuesta: Hacer visible un Div sobre un iframe

Lo que sucede es que z-index trabaja con los que tienen ya posiciones. Es decir cuando hayas declarado position, float, left, right, top o bottom, te recomiendo esta lectura http://www.librosweb.es/referencia/css/z-index.html
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. *{ margin: 0; padding: 0; }
  4. iframe{
  5.     width: 300px;
  6.     height: 300px;
  7.     background-color: #000;
  8. }
  9. #wrap{
  10.     width: 300px;
  11.     margin: 0 auto;
  12.     position: relative;
  13. }
  14. #div1{
  15.     position: absolute;
  16.     top: 100px;
  17.     left: 100px;
  18.     width: 100px;
  19.     height: 100px;
  20.     z-index: 100;
  21.     background-color: #fff;
  22. }
  23. </head>
  24. <div id="wrap">
  25.     <div id="div1"></div>
  26.     <iframe src="#"></iframe>
  27. </div>
  28. </body>
  29. </html>
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #5 (permalink)  
Antiguo 30/05/2011, 03:38
(Desactivado)
 
Fecha de Ingreso: mayo-2005
Ubicación: España
Mensajes: 471
Antigüedad: 11 años, 8 meses
Puntos: 45
Respuesta: Hacer visible un Div sobre un iframe

Como ya ha dicho abimaelrc, para declarar la posición Z de un elemento es necesario haberlo posicionado con respecto a los ejes X e Y.

No puedes posicionar primero la tercera dimensión antes de posicionar las dos primeras.
  #6 (permalink)  
Antiguo 30/05/2011, 12:35
 
Fecha de Ingreso: octubre-2010
Ubicación: Buenos Aires
Mensajes: 125
Antigüedad: 6 años, 3 meses
Puntos: 11
Respuesta: Hacer visible un Div sobre un iframe

Buenisimo el tutorial.. Me despejo un par de dudas y me quedo claro como trabaja el z-index.. Gracias muchachos ;)

Etiquetas: iframe, visibilidad
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:42.