How to put DIV over FRAMESET?
I want to have DIV layer drawn over my frameset. I heard that DIVs can be placed inside <frameset> but it does not work for me.
The following example does not work. I don't even see DIV in Firebug HTML-inspector.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test of frameset with div</title>
<style type="text/css">
#flashContent {
position:fixed;
left:200px;
bottom:200px;
width:400px;
height:400px;
background-color:red;
z-order:1000;
}
</style>
</head>
<frameset rows="*,100px" style="z-order:10">
<frame src="content1.html">
<frame src="bottom.html">
<div id="flashContent">
Something
</div>
</frameset>
</html>
Answer
You cannot position DIVs on top of framesets. The only way to achieve is to position your DIV over an iFrame. At least for newer browsers (no IE6).
As per your code example you have to position your DIV absolutely including the z-index property:
#flashContent {
position: absolute;
left: 200px;
bottom: 200px;
z-index: 2;
width:400px;
height:400px;
background-color:red;
}