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 :
<!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
