CSS 絶対位置プロパティの分析: 絶対および固定

CSS 絶対配置属性分析: 絶対および固定

絶対配置は、position:Absolute を使用する、CSS の一般的で便利なレイアウト テクノロジです。または position:fixed 属性。通常のドキュメント フローから要素を切り離し、その要素を含む要素に対して相対的に配置できます。この記事では、絶対と固定の 2 つの絶対位置プロパティを詳細に分析し、具体的なコード例を示します。

1. position:Absolute

position:absoluteプロパティは、次の場合に、最も近い位置にある祖先要素を基準にして要素を配置します。祖先要素は配置されず、ドキュメントのルート要素を基準にして配置されます。

基本構文:

position: absolute;
top: 像素值/百分比值;
left: 像素值/百分比值;
right: 像素值/百分比值;
bottom: 像素值/百分比值;

コード例:

<style>
    .container {
        position: relative;
        width: 300px;
        height: 200px;
        background-color: lightblue;
    }
    
    .box {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div class="container">
    <div class="box"></div>
</div>

上記の例では、コンテナ要素 .container を作成し、配置しました。モードは次のとおりです。 位置:相対に設定します。次に、コンテナ内に .box 要素を作成し、その配置モードを position:Absolute に設定し、top および leftAttribute セットを渡します。その位置は、.container 要素に対して 50 ピクセルです。

2. position:fixed

position:fixedこの属性は、スクロールバーは、スクロールすると位置が変わります。

基本構文:

position: fixed;
top: 像素值/百分比值;
left: 像素值/百分比值;
right: 像素值/百分比值;
bottom: 像素值/百分比值;

コード例:

<style>
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: lightblue;
    }
    
    .container {
        height: 1000px;
        background-color: lightgray;
    }
</style>

<div class="header">
    <h1>固定头部</h1>
</div>

<div class="container">
    <!-- 页面内容 -->
</div>

上記の例では、.header 要素を作成し、それを Set to # として配置しました。 ##position:fixed を指定し、top プロパティと left プロパティを使用してその位置をビューポートの左上隅に設定します。このように、.header 要素は常にページの上部に表示され、スクロールの影響を受けません。

絶対的に配置された要素は参照として相対的に配置された祖先要素を必要とするのに対し、固定的に配置された要素はビューポートを基準にして配置されることに注意してください。

絶対位置属性は、CSS でレイアウトを実装するための重要なツールの 1 つであり、より柔軟で正確なページ レイアウトを実現するのに役立ちます。

position:Absolute と position:fixed の使用法をマスターすると、ページ要素の位置と動作をより適切に制御できるようになります。

要約すると、

position:Absolute は最も近い位置にある祖先要素を基準にして要素を配置し、position:fixed はビューポートを基準にして要素を配置します。これら 2 つの属性はフロントエンド開発で広く使用されており、さまざまなレイアウト効果を実現するのに便利です。

以上がCSS 絶対位置プロパティの分析: 絶対および固定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。