Relative/Absolute Overlapping Page Content

The page Dynamic Page Content shows you how you can use javascript to make different entries appear and disappear on the page depending on which radio button is selected. On that page the two tables appear in different locations on the page even though only one appears at a time.

It is relatively easy to use a combination of relative and absolute positioning definitions in stylesheets in order to make multiple entries appear in the exact same place on the page.

Here is a modified version of the from from that page that displays one of two tables in the exact same place on the page.

Show 1
Show 2
No Show

The code to display the tables in the same position is as follows:

<table class="centre" width="100" border="0"><tr><td>
<div style="position:relative;">
<div id="showone" style="visibility:hidden;position:absolute;top:0px;left:0px;">
<table class="centre"width="100" border="1"><tr><td class="centre">First</td></tr></table>
<div id="showtwo" style="visibility:hidden;position:absolute;top:0px;left:0px;">
<table class="centre" width="100" border="1"><tr><td class="centre">Second</td></tr></table>

The changes that we have made in order to achieve this positioning are as follows:

By adding each of these to the definition we now have multiple <div> tags whose contents appear in exactly the same position on the screen. This same combination of position:relative and position:absolute tags can be used to overlay whatever content that you want onto the same position on the page. They can even appear over the top of one another at the same time if that is what you require.

Note that this does not work with Netscape 4.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow