Layering IFrames using positioning and z-index.

I was recently given a task by a client that required me to layer multiple IFrames on top of each other in order to facilitate the display of 3 separate content blocks (share price feeds) so that the content of two of them was only partially shown.

Each frame was a simple, relatively small area of text that displayed the current share price for a listed fund:

There were to be 3 frames in total.  Each frame was to display a different price, in the bottom 2 frames, only the share price was to be displayed and not any of the other content.

Using standard CSS positioning techniques I was able to position the 3 frames so that the 3 share prices were aligned correctly:

(Note the CSS code here is inline for simplicity)

<div style="display:block;position:absolute;top:0px;">
|||||<iframe src="http://www.myurl.com/iframe1" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" />
</div>
<div style="display:block;position:absolute;top:30px;">
|||||<iframe src="http://www.myurl.com/iframe2" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" />
</div>
<div style="display:block;position:absolute;top:60px;">
|||||<iframe src="http://www.myurl.com/iframe3" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" />
</div>

The major problem here is the overlapping of IFrames, while the positioning is correct, the 3rd IFrame overlaps the 1st and 2nd IFrames, and the 2nd IFrame overlaps the 1st IFrame.

To get around this we use the z-index property of CSS.  This property only works on elements that have been positioned, as we have done with each IFrame, in that it has been placed within an absolutely positioned HTML div element.  Z-index facilitates the display order (or ‘stack’ order) of elements on a page.

Hence we get the following by setting the z-index of each div to 999, 998 and 997 respectively.

<div style="display:block;position:absolute;top:0px;z-index:999;">
|||||<iframe src="http://www.myurl.com/iframe1" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" ></iframe>
</div>
<div style="display:block;position:absolute;top:30px;z-index:998;">
|||||<iframe src="http://www.myurl.com/iframe2" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" ></iframe>
</div>
<div style="display:block;position:absolute;top:60px;z-index:997;">
|||||<iframe src="http://www.myurl.com/iframe3" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" ></iframe>
</div>

Note the lower the number the z-index, the lower the priority it has in the stack.  Z-indexes can also be negative.

The solution was effective enough for the client to be implemented on their site and saves the space that would otherwise be needed on the web page if there were 3 IFrames positioned separately from each other.