div position in differents screens

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.