ページを上下にスクロールしても、画面の中央に「div」を配置できますか? 質問する

ページを上下にスクロールしても、画面の中央に「div」を配置できますか? 質問する

div私のページには、クリックすると画面の中央に (ポップアップ スタイル)が表示されるボタンがあります。

div画面の中央に配置するために、次の CSS を使用しています。

.PopupPanel
{
    border: solid 1px black;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;

    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}

この CSS は、ページが下にスクロールされない限り正常に機能します。

しかし、ボタンをページの下部に配置すると、クリックしたときに がdiv上部に表示され、ユーザーは の内容を表示するために上にスクロールする必要がありますdiv

divページをスクロールした場合でも、画面の中央に を表示する方法を知りたいです。

ベストアンサー1

position属性fixedを の代わりに に変更しますabsolute

おすすめ記事