html - ボタンをクリックするときに「ポップオーバー」が発生する-CSSで配置するにはどうすればよいですか？

Question

コンテンツの上に配置したいので、絶対的な配置が道であると思います。そうすれば、他のものが押しのけられることはありません。

ただし、クリックしたボタンの下にあることを確認したいと思います。絶対位置を使用して右に0と設定すると（ボタンはページの右側にあるので、そこにポップオーバーを配置します）、機能しますが、ページを広くしたり狭くしたりすると、それに応じて移動します。

ボタンの下の領域に貼り付けて、コンテンツを押し出さないようにするにはどうすればよいですか？

Answer 1

絶対位置とz-indexを使用します。

この中央はpopupウィンドウ内にあります：

.popup {
    position:absolute;
    display:block;
    width:200px;
    left:50%;
    margin-left:-100px; //half of the width
    top:50px;
    z-index:9;
}