」です。 」。"/> 」です。 」。">

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLでdivの固定位置を設定する方法

HTMLでdivの固定位置を設定する方法

WBOY
WBOYオリジナル
2021-11-25 11:41:5414711ブラウズ

HTML では、div 要素に「position:fixed;」スタイルを追加して固定位置に設定すると、div 位置を変更せずに固定できます。構文は「

"。

HTMLでdivの固定位置を設定する方法

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

htmldiv の固定位置を変更しないように設定する方法

HTML では、style 属性を使用して位置を指定することができます。要素の配置タイプ。値が固定に設定されているだけで、絶対配置要素が生成され、ブラウザ ウィンドウを基準にして配置されます。つまり、固定位置は変化しない。

div の位置を固定する方法を例として見てみましょう。例は次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="width:100%; height:100px; background:red; position:fixed; bottom:0;">这是一个固定在底部的div</div>
</body>
</html>

出力結果:

HTMLでdivの固定位置を設定する方法

上記の例では、div は下部に固定されています。style 属性を使用して、position:fixed スタイルを div 要素に追加するだけです。

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

以上がHTMLでdivの固定位置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。