I understand that as of IE5.5 iframes respect the z-index style
property. However I have noticed some odd behaviour when the iframe's
src is set to an MHT web archive instead of an HTML file.
For example: I have a DIV containing an IFRAME and an IMG, whose
z-index is 1. I have a second, identical DIV except this one's z-index
is set to 0. I would expect the first DIV (including the IFRAME and
IMG) two be rendered above the second DIV. When the src of the IFRAMEs
is an HTML page, this is true.
However if I use MHT files as the src of the IFRAMEs, the second DIV's
IFRAME (z-index: 0) appears above the first DIV's IMG (z-index: 1),
but not above the other IFRAME.
I assume this is because there are in face two z-order worlds. One for
windowed elements (e.g. IFRAMEs), and one for windowless elements
(e.g. IMGs). But why the different behaviour between HTML/MHT files?
Here is a screenshot using Win2k/IE6: http://tinypic.com/368zm
And here is the code I used:
<html>
<body>
<div style="position: absolute; z-index:1; left: 10; top: 10; width:
180; height: 80">
<iframe width="100" height="80" src="red.html"
scrolling="no"></iframe>
<img src="images/doll2.jpg" width="60" height="80">
</div>
<div style="position: absolute; z-index:0; left: 30; top: 70; width:
180; height: 80">
<iframe width="100" height="80" src="green.html"
scrolling="no"></iframe>
<img src="images/xltronic-avatar.jpg" width="60" height="80">
</div>
<div style="position: absolute; z-index:1; left: 10; top: 200; width:
180; height: 80">
<iframe width="100" height="80" src="red.mht"
scrolling="no"></iframe>
<img src="images/doll2.jpg" width="60" height="80">
</div>
<div style="position: absolute; z-index:0; left: 30; top: 260; width:
180; height: 80">
<iframe width="100" height="80" src="green.mht"
scrolling="no"></iframe>
<img src="images/xltronic-avatar.jpg" width="60" height="80">
</div>
</body>
</html>