html - divをページのビューポイントの上部にとどめる方法

Question

どのくらい下にスクロールしても、divがビューポイントの一番上にくるようにしようとしています。これまでの私のコードは次のとおりです。

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
</style>
<div id="mydiv">Test Div</div>

私はこれについて多くのことを調べましたが、どれもうまくいきません。ヘルプ！

Answer 1

これは私にとってはうまくいきます。

position: fixed;

ヒント: xxx が css でどのように実装されているか知りたい場合は、既にそれを使用している Web サイトのソース コードを調べることができます。

Answer 2

positionプロパティをfixed次のように変更します。

position: fixed;

MDNから:

position: fixed
要素のためのスペースを残さないでください。代わりに、画面のビューポートに対して指定された位置に配置し、スクロールしても移動しません。印刷するときは、すべてのページの固定位置に配置します。

Answer 3

次のコードをプログラムに追加してください clear : both; トップ: 0px;