Put 2 elements in the same place

[smithsa]

How do I put 2 elements in the same place? I have the following code on my page:

    <SPAN ID="link1">                                
      <A HREF="url1">Click on link1</a>   
    </SPAN>   

    <SPAN ID="link2">                                
      <A HREF="url2">Click on link2</a>   
    </SPAN>

Now elsewhere on the page, I use JavaScript so that either link1 or link 2 (but not both) are visible using the visibility attribute. Depending on what's going on with the rest of the page, only one of these links is active. Users can do things on the page so that it will toggle.

My problem is that I want both links to come up in the exact same spot. The way things are now, link2 will come up to the right of where link1 was before it became invisible. This make sense, because link1 still technically exists, it is just invisible. But that isn't what I want.

Any idea on how I can accomplish what I want? I've seen something about using innerHTML, but it sounds non-standard and kind of dangerous. What's the official way to do something like this?

[timothyb89]

Try using CSS for that. Replace the <SOME AMOUNT HERE> text and the examples with your own value.

<SPAN ID="link1" style="position: absolute; margin-top: <SOME AMOUNT IN % OR px. Ex: >10%; margin-left: <ANOTHER AMOUNT. EX: >50px">                                
    <A HREF="url1">Click on link1</a>   
</SPAN>   

<SPAN ID="link2" style="position: absolute; margin-top: <SOME AMOUNT IN % OR px. Ex: >10%; margin-left: <ANOTHER AMOUNT. EX: >50px">                                
    <A HREF="url2">Click on link2</a>   
</SPAN>