One DIV on top of another

[Tim Cowan]

Hi

I want to align one DIV on top of another. The first DIV will be positioned
relative to a table (underneath) The second DIV needs to be positioned the
same (overtop) as the first DIV. I guess I need to 'extract' the position
of the first DIV and 'apply' it to the second DIV.

Is it possible to do this and what would the code be?

Thanks

Tim Cowan

[Glenn]

"Tim Cowan" <tcowan@golden.net> wrote:
>Hi
>
>I want to align one DIV on top of another. The first DIV will be positioned
>relative to a table (underneath) The second DIV needs to be positioned
the
>same (overtop) as the first DIV. I guess I need to 'extract' the position
>of the first DIV and 'apply' it to the second DIV.
>
>Is it possible to do this and what would the code be?
>
>Thanks
>
>Tim Cowan
>
>
This works for IE. I believe that the divs must have style="position:absolute"
(or position:relative) attributes in their tags also:

Sub Overlay()

'Position Div2 at Div1
window.div2.style.top = window.div1.style.top
window.div2.style.left = window.div1.style.left

'Put Div2 on top of Div1
window.div1.style.zindex = 0
window.div2.style.zindex = 1 'higher than 0, so on top

End Sub

Note you can also simply make div1 invisible by setting its display or visibility
attribute instead of using the zindex like this:

window.div1.style.display = "none"
window.div2.style.display = "block"
OR
window.div1.style.visibility = "hidden"
window.div2.style.visibility = "visible"

But, note that if you use the display property instead of the visibility
property, it might not totally hide (sometimes, I get a small line where
the top of the div is, must be a bug!).

Also, look into the offsettop and offsetleft, the pixeltop and pixelleft
and the clientx (clienttop?) and clienty (clientleft?) properties for finding
where you want to position it if the above won't work for you.

The HTML might look something like this:

<DIV id="div1" name="div1" overflow="auto"
style="position:absolute;top:100;left:250;display:block;z-index:0">

[Tim Cowan]

Thanks Glenn that worked great. I did have to set them both to
"position:absolute"

Tim Cowan


"Glenn" <gaclark@broughton-sys.com> wrote in message
news:39c89229$1@news.devx.com...
>
> "Tim Cowan" <tcowan@golden.net> wrote:
> >Hi
> >
> >I want to align one DIV on top of another. The first DIV will be
positioned
> >relative to a table (underneath) The second DIV needs to be positioned
> the
> >same (overtop) as the first DIV. I guess I need to 'extract' the
position
> >of the first DIV and 'apply' it to the second DIV.
> >
> >Is it possible to do this and what would the code be?
> >
> >Thanks
> >
> >Tim Cowan
> >
> >
> This works for IE. I believe that the divs must have
style="position:absolute"
> (or position:relative) attributes in their tags also:
>
> Sub Overlay()
>
> 'Position Div2 at Div1
> window.div2.style.top = window.div1.style.top
> window.div2.style.left = window.div1.style.left
>
> 'Put Div2 on top of Div1
> window.div1.style.zindex = 0
> window.div2.style.zindex = 1 'higher than 0, so on top
>
> End Sub
>
> Note you can also simply make div1 invisible by setting its display or
visibility
> attribute instead of using the zindex like this:
>
> window.div1.style.display = "none"
> window.div2.style.display = "block"
> OR
> window.div1.style.visibility = "hidden"
> window.div2.style.visibility = "visible"
>
> But, note that if you use the display property instead of the visibility
> property, it might not totally hide (sometimes, I get a small line where
> the top of the div is, must be a bug!).
>
> Also, look into the offsettop and offsetleft, the pixeltop and pixelleft
> and the clientx (clienttop?) and clienty (clientleft?) properties for
finding
> where you want to position it if the above won't work for you.
>
> The HTML might look something like this:
>
> <DIV id="div1" name="div1" overflow="auto"
> style="position:absolute;top:100;left:250;display:block;z-index:0">
>