Relative And Absolute Positioning of tables

I am looking for a way for overlapping a table on another, but with a condition.

When you change the browser's size or you change the screen resolution so every positioning should be fine.

I test absolute positioning (z-index and top and left) but when you change the browser's size or you change the screen resolution the absolute positioning table loses my favorite position into other static table.

I test relative positioning (z-index and top and left) and when you change the browser's s开发者_如何学编程ize or you change the screen resolution everything is fine but we have reserved space for relative table. How can I remove that?

I think it's not problem of relative position or absolute position. In order that 2 tables/divs could be overlapped, one should use negative margin. In order that the layout looks elastic when u change the browser's size or the screen resolution, you have to use % as the unit of width for the tables/divs. Here's an example

HTML

<div class="table1"></div>
<div class="table2"></div>

CSS

.table1{width:80%; height:200px; background-color:#cfcfcf;margin: 0px auto;}  
.table2{width:60%; height:200px; background-color:#fffae4;margin:-20px auto 0;}

The other way is using relative top position to achieve the effect of overlapping. And then the position should be either relative or absolute but different math to calculate the value of the negative top position. It's easy to understand to use relative position.

Here's another CSS using relative position.

.table1{position:relative; width:80%; height:200px;background-color:#cfcfcf;top:10px;margin:0 auto}  
    .table2{position:relative; width:60%; height:200px; background-color:#fffae4;top: -20px;margin:0 auto}

So the key is using % as the unit of width. You can have a test with other units on this page.