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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 02, 2022 pm 06:09 PM

css

この記事では、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 id="这是带有固定定位的标题">这是带有固定定位的标题</h2>
        <p>相对于浏览器窗口来对元素进行定位</p>
        <p class="p2">相对于浏览器窗口来对元素进行定位</p>
    </body>
 
</html>

出力結果:

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

知識を広げるメインコンテンツの右側に配置する方法

注:

固定ボックスを上部に配置しないと、他の div によって覆われてしまいます。固定ボックスを必ず上部に配置してください

(学習ビデオ共有:

css ビデオチュートリアル

、html ビデオチュートリアル )

以上がCSS配置プロパティの固定プロパティの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

非常に多くの色のリンクApr 13, 2025 am 11:36 AM

最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。

FlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AM

ロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました

動く虹色の下線Apr 13, 2025 am 11:27 AM

サンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません

新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！Apr 13, 2025 am 11:26 AM

多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう

リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AM

ページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています

Reactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AM

Reactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。（「正しいと感じる」までファイルを移動するだけです笑）。真実

非アクティブユーザーの検出Apr 13, 2025 am 11:08 AM

ほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、

See all articles

ホットAIツール

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。