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.
|
The code to display the tables in the same position is as follows:
<table align="center" width="100" border="0"><tr><td>
<div style="position:relative;">
<div id="showone" style="visibility:hidden;position:absolute;top:0px;left:0px;">
<table align="center"width="100" border="1"><tr><td align="center">First</td></tr></table>
</div>
<div id="showtwo" style="visibility:hidden;position:absolute;top:0px;left:0px;">
<table align="center" width="100" border="1"><tr><td align="center">Second</td></tr></table>
</div>
</div>
</td></tr></table>
The changes that we have made in order to achieve this positioning are as follows:
- We have enclosed the entire code within a table with no border in order to ensure that the display appears aligned to the centre of the page. This sets the top left position for the content that follows.
- The entire content of the table is enclosed within <div style="position:relative;"> </div> tags to force all absolute positions contained within to be calculated relative to the current location instead of the top left corner of the page.
- Each entry that is to appear in this location has style="position:absolute;top:0px;left:0px;" defined to position it at the top left corner of the previously defined position.
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.
