Layering IFrames using positioning and z-index « Datadial Blog
0208 6000 500

Alex

July 1st, 2008.


Filed under Development,Programming

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.

2 comments on Layering IFrames using positioning and z-index

  1. Rampy says:

    Thanks boss… the last part of the post helped in getting rid of the top, left side space in the layout … and also in exact positioning of iframes on the webpage.

    But the only thing that is left is the extra space to the right side of the page. Its almost the standard 50px… Tried using right keyword in the style attribute, but with no effect.

    If you have any solution, do let me know…

    Thanks for the help and also further help, if possible :)

    Rampy

  2. son says:

    hi im trying to do something using iweb and im not quite sure how..

    basically i’ve built a navigation bar using just shape and type – basic html, and want that whole bar to be static and hover above any other page information. i thought i could do this using an iframe?

    any help?

Leave a comment

Recent Posts »

Our work »

What we do »

Who we work with »

Got Questions? Lets Talk »