css Relative And Absolute Positioning Problem

Question

hi my dear friends:

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

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

i test absolute positioning (z-index and top and left) but when u change the browser's size or u 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 u change the browser's size or u change the screen resolution every thing is fine but we have reserved space for relative table.how can i remove that?

thanks in future advance

Answer 1

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.