css - 異なる画面でのdivの位置

Question

Web デザインの割り当てに問題があります。

画面の特定の場所に 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 内に 4 つの div を追加する必要があります。div をラッパーとして作成すると、すべてのモニターで同じように機能します。画面の大きさに関係ないので、上と右の値は同じです。