在不同屏幕上的div位置

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

的問題是，top和left性能僅供要素工作，如果這些元素的（不必是直接的）父母position設置爲relative。

因此，您可以設置body { position: relative;}或在您的4個div上創建一個包裝div，並將其位置設置爲相對。

這是你需要的代碼的小提琴;您可以根據自己的意願定位元素，並且divs的邊距將始終進行屏幕修改。

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

注：我改變寬度/高度特性的位（除以3），以使它們適合屏幕。

• PS：如果很多元素具有相同的屬性，最好在一個類中指定它們。這就是爲什麼我在小提琴中添加了類.common。

Answer 2

，如果你在頂部和右側用百分比不要緊，因爲頂級的1200像素顯示器和960像素高度的28％顯示器是不一樣的。您必須在div內添加四個div。創建一個div作爲包裝，它將在所有顯示器上都一樣。因爲屏幕的大小沒有關係，所以頂部和右側的值是相同的。