Foros del Web - Ver Mensaje Individual

diego1311 · #1 (**permalink**) 10/12/2010, 22:35

Hola a todos, en un proyecto tengo un problema con las capas div similar al ejemplo que les muestro.

En el siguiente ejemplo, se supone que devería aparecer una franja negra delante de la pagina de google pero no sucede asi, solo se ve la franja cuando quito el <iframe> al parecer este objeto estropea las capas.

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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body style="margin:0px; overflow:hidden;">
 
<div style="position:absolute; width:60%; left:20%; height:60%; top:20%; background-color:#CCC;">
    <div style="position:absolute; z-index:0; width:100%; height:100%; background-color:#FF0">
        <iframe src="http://www.google.com" width="100%" height="100%"/>
    </div>
    <div style="position:absolute; width:100%; background-color:#000000;  z-index:1; height:100px;" id="div_problema"/>
</div>
 
</body>
</html>

Cómo puedo hacer que el <iframe> no genere el conflicto con el div de color negro?

Gracias, espero que me puedan ayudar