CSS Layering Help!

[AngryKid]

I have a project with a fairly complex design and each page is different. The basic design is a grid where the tiles are varying size and in varying locations as determined by the script. I could code it used some nasty tables, but the code would a) be wordy b) be difficult to change and maintain and c) be custom for each page. If I could get this to work, I would save on time, code, and if anyone else needed to maintain it in the future, they would only need to change a few lines or coordinates in CSS instead of doing the painstaking task of tracing table tags.

Here is a a very simple illustration of what I'm trying to accomplish:
Sample Illustration (PNG, 80k)

At this point, if I can get it to work in IE 5+ and Nutscrape 6 or 7 I'd be satisfied for this project (as would my client).

Any ideas or links to a good, simple example/tutorial?

 

[ProviaFan]

The z-index: and other CSS properies for absolute positioning should be of use to you here. Here are some things that might be helpful if you need to learn more about CSS positioning.

 

[AngryKid]

Perhaps I should elaborate. I would like to center the table and have the picture be placed over it regardless of the user's screen size. So absolute positioning won't work and I can't get relative to work.

Simple example that doesn't work:

<style type="text/css">
#one {
text-align: center;
}
#two {
position: relative;
left: 0pt;
top: 0pt;
}
</style>

<div id="one">
<table border="1" width="227" height="193">
<tr>
<td></td>
</tr>
</table>
<img id="two" src="test.jpg">
</div>