0

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;
}
4

2 回答 2

0

顶部和右侧是否使用百分比无关紧要，因为 1200 像素显示器和 960 像素高度显示器中顶部的 28% 是不一样的。您必须在一个 div 中添加四个 div。创建一个 div 作为包装器，它将在所有监视器上工作。因为屏幕的大小无关紧要，所以顶部和右侧的值是相同的。

于 2013-05-13T23:06:55.520 回答
0

问题是，如果这些元素（不必是直接的） parent设置为top，则属性仅适用于元素。leftpositionrelative

因此，您可以body { position: relative;}围绕 4 个 div 设置或创建一个包装 div，并将其位置设置为相对。

这是您需要的代码的小提琴；您可以根据需要定位元素，并且 div 的边距将始终适应屏幕尺寸。

http://jsbin.com/ogexev/1/edit

注意：我稍微更改了宽度/高度属性（除以 3）以使其适合屏幕。

  • PS：如果许多元素具有相同的属性，则最好将它们指定在一个类中。这就是为什么我.common在小提琴中添加了一个类。
于 2013-05-13T23:59:17.817 回答