スクロールバーと一緒に動かないCSS divを実装する方法

css スクロール バーと一緒に移動しない div を実装する方法: 最初にサンプル ファイルを作成し、次に div の css 属性スタイルを「position:fixed;」に設定して、スクロール バーと一緒に移動しないように div を修正します。スクロールバー。

このチュートリアルの動作環境: Windows 7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。

推奨: 「css ビデオ チュートリアル 」

css で div がスクロール バーと一緒に移動しないように設定します

コンテンツを修正しますブラウザウィンドウを基準とした特定の A 位置に配置されます。ここでは固定位置が使用されます。

配置には通常、絶対配置と相対配置が含まれます。これらは本文内のブロック要素に対して相対的なものですが、スクロールに関係なく、バーがどこにスライドしても、特定のコンテンツを特定の位置に配置したい場合は、ブラウザウィンドウには表示されたままなので、fixed を使用する必要があります。

固定要素ボックスは、そのボックスを含むブロックがビューポート自体であることを除いて、位置を絶対に設定するのと同じように動作します。 left、top、right、bottom の値を持つことに同意します。その使用法は絶対と同様です。

例:

<div style="width:100px; height:100px; border:1px solid red; position:fixed; left:300px; top:300px;">
    固定的内容
</div>

上記の div の幅は 100、高さは 100 です。ブラウザの左上隅から 300 ピクセルの位置にあり、ブラウザのスクロールと一緒にスクロールしません。ページ。

以上がスクロールバーと一緒に動かないCSS divを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。