CSS配置プロパティの固定プロパティの詳細説明-CSSチュートリアル-php.cn

CSS配置プロパティの固定プロパティの詳細説明

WBOY

リリース： 2022-08-02 18:09:15

オリジナル

7832 人が閲覧しました

この記事では、css に関する関連知識を提供します。主に CSS 位置決め属性の固定位置に関連する問題を紹介します。固定位置とは、ブラウザウィンドウに対する要素の位置が固定位置であることを示します。ウィンドウをスクロールしても動かないので、見てみましょう。

CSS配置プロパティの固定プロパティの詳細説明

(学習ビデオ共有: css ビデオチュートリアル、html ビデオチュートリアル)

CSS 位置決め属性の詳細固定属性の説明

#固定位置

#要素の位置は、ブラウザウィンドウに対して固定された位置です。

ウィンドウをスクロールしても移動しません:

固定配置とは、ブラウザの表示領域内で要素が固定される位置です。主な使用シナリオ: ブラウザーのページがスクロールされても、要素の位置は変わりません。

構文:

选择器｛position:fixed;｝

ログイン後にコピー

説明

固定位置の特徴

固定固定配置と絶対配置は似ており、どちらも要素を移動してドキュメントフローから切り離すことができます。

文法:

position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;

ログイン後にコピー

「position:fixed;」は、top、bottom、left、right の 4 つの属性と組み合わせて使用され、そのうち「position:fixed;」は要素を固定にします。要素の位置を指定し、次に 4 つの属性、top、bottom、left、right を使用して、ブラウザを基準とした要素の位置を設定します。

4 つの属性 (top、bottom、left、right) がすべて使用されるわけではありません。これら 4 つの値の参照オブジェクトはブラウザの 4 つの端であることに注意してください。

例は次のとおりです:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            h2.pos_abs {
                position: fixed;
                left: 100px;
                top: 120px
            }
            p{
                height: 100px;
                background-color: palegoldenrod;
            }
            p.p2{
                margin-top:120px ;
            }
        </style>
    </head>
 
    <body style="height: 1200px;">
        <h2 class="pos_abs">这是带有固定定位的标题</h2>
        <p>相对于浏览器窗口来对元素进行定位</p>
        <p class="p2">相对于浏览器窗口来对元素进行定位</p>
    </body>
 
</html>

ログイン後にコピー

出力結果:

CSS配置プロパティの固定プロパティの詳細説明