div position in differents screens - css

Question

I have a problem in my web design assigment.
I can't make my 4 divs appear in a specific location in the screen.
Also need to mention that all of the 4 divs need to be overlap so I used z-index. But when I run my site on different screens the position always change although I used percents.
This is my css code (welcome, register, login, game are my div classes):
.welcome
{
position:absolute;
top:28%;
right:9%;
width:960px;
height:660px;
z-index: 3;
}
.register
{
position:absolute;
top:28%;
right:9%;
width:960px;
height:660px;
z-index: 2;
}
.Login
{
position:absolute;
top:28%;
right:9%;
width:960px;
height:660px;
z-index: 1;
}
.game
{
position:absolute;
top:28%;
right:9%;
width:960px;
height:660px;
z-index: 0;
}

Answer 1

The problem is that top and left properties only work for elements if these elements' (doesn't have to be direct) parent position is set to relative.
So you can either set body { position: relative;} or create a wrapper div around your 4 divs and set its position to relative.
Here is a fiddle with the code you need; you can position the elements however you wish, and the divs' margins will always be screensize-adapted.
http://jsbin.com/ogexev/1/edit
Note: I changed the width/ height properties a bit (divided by 3) to make them fit the screen.
PS: If many elements have the same properties, you're better off specifying them in one class. That's why I added a class .common in the fiddle.

Answer 2

It doesn't matter if you use percent in top and right, because the 28% of top in 1200px monitor and 960px height monitor is not the same. You must add the four divs inside a div. Create a div as a wrapper and it will work same on all the monitors. Because it doesn't matter the size of the screen the top and right values are the same.