Question

我的网页设计中存在问题。

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

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

这是我的css代码（welcome, register, login, game是我的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;
}

Answer 1

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

Answer 2

问题是top和left属性仅适用于元素，如果这些元素（不必是直接的）父position设置为relative

所以你可以设置body { position: relative;}或者在4个div周围创建一个包装div并将其位置设置为相对。

这是你需要的代码的小提琴;你可以根据自己的意愿定位元素，div的边距总是适合屏幕尺寸。

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

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

PS：如果许多元素具有相同的属性，最好在一个类中指定它们。这就是为什么我在小提琴中添加了一个班级.common。

不同屏幕中的div位置

2 个答案: