Hacer visible un Div sobre un iframe

maximilianojcelis · #1 (**permalink**) 29/05/2011, 12:09

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}

el_java_07 · #2 (**permalink**) 29/05/2011, 13:17

Prueba con asignarle al div la función z-index de Css ;)
http://www.w3schools.com/css/pr_pos_z-index.asp

maximilianojcelis · #3 (**permalink**) 29/05/2011, 15:05

Probe pero no me andubo ¬¬
Gracias iwal por contestar ;)

abimaelrc · #4 (**permalink**) 29/05/2011, 21:46

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
*{ margin: 0; padding: 0; }
iframe{
    width: 300px;
    height: 300px;
    background-color: #000;
}
#wrap{
    width: 300px;
    margin: 0 auto;
    position: relative;
}
#div1{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    z-index: 100;
    background-color: #fff;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="div1"></div>
    <iframe src="#"></iframe>
</div>
</body>
</html>

Rolldi · #5 (**permalink**) 30/05/2011, 02:38

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.

maximilianojcelis · #6 (**permalink**) 30/05/2011, 11:35

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