One DIV on top of another


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 3 of 3

Thread: One DIV on top of another

  1. #1
    Tim Cowan Guest

    One DIV on top of another

    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



  2. #2
    Glenn Guest

    Re: One DIV on top of another


    "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">


  3. #3
    Tim Cowan Guest

    Re: One DIV on top of another

    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">
    >




Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center