CSSの位置決めとは何ですか-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSSの位置決めとは何ですか

藏色散人

Apr 13, 2021 am 09:08 AM

css

CSS の配置には、1. static (静的配置を意味します)、2.relative (相対配置を意味します)、3.Absolute (絶対配置を意味します)、4.fixed (固定配置を意味します) が含まれます。

CSSの位置決めとは何ですか

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS Positioning プロパティを使用すると、要素を配置できます。 CSS は、列状のレイアウトを作成したり、レイアウトの一部を別の部分に重ねたり、長年複数のテーブルを使用する必要が多かったタスクを実行したりできる、配置用のプロパティを提供します。

CSS 配置のいくつかの方法:

1. static (静的配置):

デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。前回のエッセイを参照してください。

2.相対 (相対配置):

相対として配置された要素は通常のドキュメントフローから分離されていますが、ドキュメントフロー内の位置は依然として存在しますが、視覚的にはドキュメントフローとは異なります。元の位置に移動します。

上、下、左、右の設定により、通常の (元の) 位置を基準とした相対位置。階層的なグレーディングは、z-index を通じて実行できます。

.static1{
            height:80px;
            background-color: red;
        }
        .relative{
            height:80px;
            position:relative;
            top:40px;
            left:40px;
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="relative"></div>
    <div class="static2"></div>
</body>

ログイン後にコピー

3. Absolute (絶対配置): 絶対配置要素を生成し、静的配置以外の最初の親要素を基準にして配置します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。

絶対として位置付けられたレイヤーは、通常のドキュメントフローから切り離されますが、相対との違いは、そのレイヤーが通常のフロー内に存在しなくなることです。

この属性に関して、常に誤解を招く情報を与える人がいます。 Position 属性を絶対に設定すると、常にブラウザウィンドウに従って配置されると言われていますが、これは実際には間違いです。実はこれが固定資産の特徴なのです。

<style type="text/css">
        .static1{
            height:80px;
            background-color: red;
    
        }
        .father{
            height:100px;
            background-color: pink;
            position:relative;
            left:20px;    
        }
        .relative{
            height:80px;
            width:80px;
            position:absolute;
            top:10px;
            left:10px;
        
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="father">
        <div class="relative"></div>
    </div>
    <div class="static2"></div>

ログイン後にコピー

4. 固定 (固定配置): 絶対配置の要素を生成し、ブラウザウィンドウを基準にして配置します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。

<style type="text/css">
        .static1{
            height:80px;
            background-color: red;
    
        }
        .father{
            height:100px;
            width:300px;
            background-color: pink;            
            left:100px;    
            top:100px;
        }
        .relative{
            height:80px;
            width:80px;
            position:fixed;
            left:20px;        
            background-color: black;
        }
        .static2{
            height:80px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="father">
        <div class="relative"></div>
    </div>
    <div class="static2"></div>

ログイン後にコピー

【推奨学習: css ビデオチュートリアル】

以上がCSSの位置決めとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7555

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。