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

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

藏色散人

リリース： 2023-01-05 16:07:49

オリジナル

3300 人が閲覧しました

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 サイトの他の関連記事を参照してください。