Log in

View Full Version : Div on top of Iframe?


MrRSMan
02-23-2008, 06:19 PM
I have a page with 2 divs on it. Inside one of these divs is an iframe.

Now, i want to add another div to the page, but have it show on top of the iframe.

I've tried using z-index, but all that does is make the div appear on top of the other div (the one without the iframe in it).

I can't for the life of me make a div show ON TOP OF an iframe. It must be possible...



<html>

<body>

<div id="1">
<iframe id="navbar_act" src="../navbar.htm" scrolling="no" border="0" frameborder="0">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
</div>

<div id="2">
Blah blah blah
</div>

<div id="3">
Help me!
</div>

</body>

</html>



Note: I'm using CSS for positioning, etc- hence the lack of here.

As you can see, the iframe is in div 1, and I need div 3 to be on top of that iframe.

Any help please?
alexjewell
02-25-2008, 01:01 AM
Did you try moving the iframe's z-index?
jscheuer1
02-25-2008, 10:42 AM
We could really use more information here, like just what CSS you are using. A link to your page that shows this problem would be best.

However, here is a very simple example:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div {
position:absolute;
top:30px;
}
#d2 {
top:190px;
}
</style>
</head>
<body>
<div id="d1">
<iframe id="navbar_act" src="about:blank" scrolling="no" frameborder="1">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
</div>

<div id="d2">
Blah blah blah
</div>

<div id="d3">
Help me!
</div>

</body>
</html>