Css 不同屏幕中的div位置

我的网页设计助理有问题

我无法使我的4个div显示在屏幕中的特定位置

还需要提到的是，所有4个div都需要重叠，所以我使用了z-index。但是当我在不同的屏幕上运行我的站点时，位置总是会改变，尽管我使用了百分比

这是我的css代码（

欢迎、注册、登录、游戏

是我的div类）：

---

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

问题是

top

和

left

属性仅在这些元素（不必是直接的）父

位置设置为
相对
时才对元素起作用

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

这里是一个你需要的代码摆弄；你可以随心所欲地定位元素，而div的边距将始终与屏幕大小相适应


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


PS：如果许多元素具有相同的属性，最好在一个类中指定它们。这就是为什么我在小提琴中添加了一个类
.common
我很困惑你想让div做什么。我创建了一个包装div，我把它的位置设置成相对的，现在div在屏幕中间，但是不是重叠，而是顺序的。哇，对不起，我把错误的链接放在帖子里，这是正确的：您可以继续使用此代码；我会创建一个包装DIV，我把它的位置设置成相对的，现在div在屏幕中间，但不是重叠，而是顺序的。
.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;
}