在不同屏幕上的div位置

问题描述：

我不能让我的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; 
}

我很困惑你想要divs做什么。 – npage 2013-05-13 22:58:28

答

的问题是，top和left性能仅供要素工作，如果这些元素的（不必是直接的）父母position设置为relative。

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

这是你需要的代码的小提琴;您可以根据自己的意愿定位元素，并且divs的边距将始终进行屏幕修改。

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

注：我改变宽度/高度特性的位（除以3），以使它们适合屏幕。

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

我创建了一个包装div，并将其设置为相对位置，现在div位于屏幕中间，但不是重叠，而是成为顺序。 – user2330062 2013-05-14 12:50:07

对不起，我在帖子中输入了错误的链接，这是正确的：http://jsbin.com/ogexev/1/edit。您可以继续使用此代码;你会看到它的作品。 – Tyblitz 2013-05-14 12:58:08

答

，如果你在顶部和右侧用百分比不要紧，因为顶级的1200像素显示器和960像素高度的28％显示器是不一样的。您必须在div内添加四个div。创建一个div作为包装，它将在所有显示器上都一样。因为屏幕的大小没有关系，所以顶部和右侧的值是相同的。

我创建一个包装div，并将其设置为相对位置，现在div位于屏幕中间，但不是重叠，而是成为顺序。 – user2330062 2013-05-14 12:50:56

在不同屏幕上的div位置

相关推荐