Have you ever experienced the select form element z-index issue
in Internet Explorer 6? Most likely you have if you've implemented some
sort of drop down menu navigation that shows up over a select form
element.

The background iframe (bgiframe) plugin provides a very small,
quick and easy way to fix that problem so you don't have to worry about it.
No matter the size, borders or position the bgiframe plugin can fix it.

The bgiframe plugin should be used when you are trying to show
elements above a select form control in Internet Explorer 6.

The usage is simple. Just call <code>bgiframe</code> on a jQuery
collection of elements.

<code>$('.fix-z-index').bgiframe();</code>

The plugin tries its best to handle most situations but sometimes
some configuration is necessary. For example if your borders are defined in
a unit other than pixels, you will need to manually set the
<code>top</code> and <code>left</code> properties to the negative width of
the border. Here are the options/settings available to configure the
output.

The iframe must be offset to the top by the width of the top
border. This should be a negative number representing the border-top-width.
If a number is is used here, pixels will be assumed. Otherwise, be sure to
specify a unit. An expression could also be used. By default the value
is "auto" which will use an expression to get the border-top-width if it is
in pixels.

<code>$('.fix-z-index').bgiframe({ top: '-1em' });</code>

The iframe must be offset to the left by the width of the left
border. This should be a negative number representing the
border-left-width. If a number is used here, pixels will be assumed.
Otherwise, be sure to specify a unit. An expression could also be used. By
default the value is "auto" which will use an expression to get the
border-left-width if it is in pixels.

<code>$('.fix-z-index').bgiframe({ left: '-1em' });</code>

This is the width of the iframe. If a number is used here,
pixels will be assume. Otherwise, be sure to specify a unit. An expression
could also be used. By default the value is "auto" which will use an
expression to get the offsetWidth.

<code>$('.fix-z-index').bgiframe({ width: 100 });</code>

This is the height of the iframe. If a number is used here,
pixels will be assume. Otherwise, be sure to specify a unit. An expression
could also be used. By default the value is "auto" which will use an
expression to get the offsetHeight.

<code>$('.fix-z-index').bgiframe({ height: 100 });</code>

This is a boolean representing whether or not to use opacity.
If set to true, the opacity of 0 is applied. If set to false, the opacity
filter is not applied. Default: true.

<code>$('.fix-z-index').bgiframe({ opacity: false });</code>

This setting is provided so that one could change the src of
the iframe to whatever they need. Default: "javascript:false;"

<code>$('.fix-z-index').bgiframe({ src: '#' });</code>

The bgiframe plugin works by prepending an iframe to the element.
The iframe is given a class of bgiframe and positioned below all the other
children of the element. In the default configuration it automatically
adjusts to the width and height of the element (including the borders) and
the opacity is set to 0. The element needs to have position (relative or
absolute) and should have a background (color or image).

Check out the <a
href="http://brandonaaron.net/jquery/plugins/bgiframe/test/">test page</a>
to see the plugin in action.

Feel free to make any suggestions, bug reports or add any patches
via the <a href="http://jquery.com/plugins/project/bgiframe">project
page</a>.

The bgiframe plugin is authored by <a
href="http://blog.brandonaaron.net/">Brandon Aaron
(http://brandonaaron.net/)</a>

Paragraph

Paragraph