CSS の位​​置属性 (absolute|relative|static|fixed) の概要と応用

CSS の位​​置属性 (absolute|relative|static|fixed) の概要と応用

まず、CSS3 Api の position 属性の定義を見てみましょう。

  • static: 特別な配置はなく、オブジェクトは通常のドキュメントフローに従います。上、右、下、左などのプロパティは適用されません。
  • relative: オブジェクトは通常のドキュメント フローに従いますが、上、右、下、左などのプロパティに従って通常のドキュメント フロー内でオフセットされます。スタッキングは z-index プロパティによって定義されます。
  • absolute: オブジェクトは通常のドキュメント フローから分離され、top、right、bottom、left などのプロパティを使用して絶対的に配置されます。スタッキングは z-index プロパティによって定義されます。
  • 固定: オブジェクトは通常のドキュメント フローから分離され、ウィンドウを基準点として上、右、下、左などのプロパティを使用して配置されます。スクロール バーが表示されても、オブジェクトはスクロールしません。スタッキングは z-index プロパティによって定義されます。

どうですか?まだ混乱していますか?問題ありません。いくつかの基本的な概念から一つずつ説明しましょう。

ドキュメントフローとは何ですか?

フォームを上から下に行に分割し、各行の要素を左から右に配置します。これがドキュメント フローです。

要素がドキュメント フローから外れる状況は、フローティング絶対配置相対配置の 3 つだけです。

静的配置(静的):

静的、特別な配置なし、これは HTML 要素のデフォルトの配置モードです。つまり、要素の位置属性を設定しない場合、デフォルトの位置値は静的であり、通常のドキュメント フロー オブジェクトに従い、オブジェクトがドキュメント スペースを占有します。この配置モードでは、上、右、下、左、z-index などの属性は無効です。

相対的な位置:

相対ポジショニングは、相対ポジショニングとも呼ばれ、文字通りこの属性の主な機能である「相対」として解釈できます。しかし、何と比較してでしょうか?これが重要なポイントであり、私にとって最も混乱する部分でもあります。では、テストをしてみましょう。皆さんも理解できると思います。

(1)当初は位置づけられていなかった

コードをコピー
コードは次のとおりです。

/******イニシャル*********/
<スタイル タイプ="text/css">
#first { 幅: 200px; 高さ: 100px; 境界線: 1px 赤一色; }
#second{ 幅: 200px; 高さ: 100px; 境界線: 1px 青一色;}
</スタイル>
<本文>
<div id="first"> 最初</div>
<div id="second">秒</div>
</本文>

オリジナル画像:

(2)最初の要素の位置属性を変更します。

コードをコピー
コードは次のとおりです。

<スタイル タイプ="text/css">
#first{ 幅: 200px; 高さ: 100px; 境界線: 1px 赤一色; 位置: 相対; 上: 20px; 左: 20px;} /*位置を追加*/
#second{幅: 200px; 高さ: 100px; 境界線: 1px 青一色;}
</スタイル>

20pxオフセットした後:


-- >> 点線は初期位置空間です

これで、相対配置はドキュメント フロー内の元の位置を基準にしていることがおわかりいただけたと思います。また、相対配置も通常のドキュメント フローに従い、ドキュメント フローから逸脱することはありませんが、上/左/右/下の属性が有効であり、静的から絶対への中間遷移属性であると言えます。最も重要なことは、それが依然としてドキュメント スペースを占有し、占有されるドキュメント スペースは上/右/左/下の属性のオフセットによって変化しないことです。つまり、その背後にある要素は点線の位置に従って配置されます (上/左/右/下の属性が有効になる前)。これは理解しておく必要があります。

わかりました。top / right / left / bottom プロパティは、相対的に配置された要素によって占有されるドキュメント スペースをオフセットしないことがわかりましたが、margin / padding はそのドキュメント スペースをオフセットするのでしょうか?答えはイエスです。一緒に実験してみましょう。

(3)マージン属性を追加する:

コードをコピー
コードは次のとおりです。

<スタイル タイプ="text/css">
#first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* マージンを追加*/
#second{幅: 200px;高さ:100px;境界線: 1px 青一色;}
</スタイル>

マージンを20pxに設定した後:

比較すると、非常に明確ではないでしょうか。最初に最初の要素の余白を 20 px に設定し、次に 2 番目の要素を 40 px 下方にオフセットする必要があるため、余白がドキュメント スペースを占有します。同様に、パディングの効果を自分で測定することもできます。

絶対位置決め:

アブソリュートポジショニングは絶対ポジショニングとも呼ばれ、名前は「絶対」ですが、機能は「相対」という言葉に近いです。なぜそう言うのですか? absoulte を使用して配置された要素がドキュメント フローを離れた後は、祖先要素 (親の上) に基づいてのみ配置でき、この祖先は位置が静的でない方法で配置する必要があります。たとえば、要素が absoulte を使用して配置されている場合、親クラスから開始し、位置が静的でない方法で配置されている祖先要素 (直接の祖先である必要があることに注意してください) を <html> タグまで探します。また、ここで注目すべき点は、相対メソッドと静的メソッドは、最も外側のレイヤーでの位置の起点として <body> タグを使用するのに対し、absoulte メソッドは、親がなく位置が静的でない場合に、位置の起点として <html> を使用することです。 <html> 要素と <body> 要素は約 9px 異なります。効果を見てみましょう:

(4)absoulte属性を追加する:

コードをコピー
コードは次のとおりです。

<html>
<スタイル タイプ="text/css">
html{border:1px 破線緑;}
body{border:1px 破線紫;}
#first{ 幅: 200px; 高さ: 100px; 境界線: 1px 赤一色; 位置: 相対;}
#second{ 幅: 200px; 高さ: 100px; 境界線: 1px 青一色; 位置: 絶対; 上:0; 左: 0;}
</スタイル>
<本文>
<div id="first">相対</div>
<div id="second">絶対</div>
</本文>
</html>

効果画像:

ハハ、上記のコードを読んだ後、注意深い友人は間違いなく、なぜ絶対配置に top:0; left:0; 属性を追加する必要があるのか​​と尋ねるでしょう。これは冗長ではないですか?

実際、これら 2 つの属性を追加することは絶対に必要です。絶対配置または固定配置を使用する場合は、left、right、top、bottom 属性の少なくとも 1 つを指定する必要があるためです。そうしないと、left/right/top/bottom 属性はデフォルト値の auto を使用し、オブジェクトは通常の HTML レイアウト ルールに従い、前のオブジェクトの直後にレンダリングされますつまり、それらはすべて相対的になり、ドキュメント スペースを占有します。これは非常に重要です。絶対配置を使用した後でもドキュメント フローから外れないことに気付く人は多くいます。これが理由です。ここに特に注意してください~~~

left/right/top/bottom 属性が欠落していると機能しないので、さらに設定するとどうなるでしょうか?たとえば、top 属性値と bottom 属性値を同時に設定した場合、要素はどこにオフセットすればよいでしょうか?次のルールを覚えておいてください:

  • 上部と下部が一緒に存在する場合は、上部のみが有効になります。
  • 左と右が同時に存在する場合は、左のみが有効になります。

絶対位置は祖先クラスの非静的要素の位置に従って決定されるため、祖先クラスのマージン/パディングは位置に影響しますか?まずは例を見てみましょう。

(5)絶対位置にマージン/パディング属性を追加する:

コードをコピー
コードは次のとおりです。

#first{幅: 200px;高さ: 100px;境界線: 1px 赤一色;位置: 相対;余白: 40px;パディング: 40px;}
#second{幅: 200px;高さ:100px;境界線: 1px 青一色;位置: 絶対;上:20px;左:20px;}
<div id="first">最初
<div id="second">秒</div>
</div>

効果画像:

祖先クラスのマージンによってサブクラスの絶対位置がシフトしますが、パディングによってサブクラスの絶対位置がシフトすることはないと理解しています。まとめると、absoulte は祖先クラスの境界に従って配置されます。

注意:オブジェクトを表示領域外に絶対位置で配置すると、スクロール バーが表示されます。相対的に配置されたオブジェクトを表示領域外に配置すると、スクロール バーは表示されません。

固定位置:

固定配置は、ドキュメント フローから分離され、上、右、左、下の属性に従って配置できるという点で絶対配置と同じです。違いは、固定配置はウィンドウを原点としてオフセットされる点です。つまり、スクロール バーのスクロールに応じてオフセットされることはありません。

z-indexプロパティ:

z-index はオブジェクトの重ね順とも呼ばれ、整数を使用して重ね順を定義します。整数値が大きいほど、重ね順が高くなります。もちろん、これは同じレベルの要素間の重ね順を指します。2 つのオブジェクトのこの属性が同じ値の場合、HTML 文書内での順序に従って重ね順になり、後から記述したものが前に記述したものを覆います。親子関係は z-index を使用して設定できないことに注意してください。子は上に、親は下になければなりません。

注意: 静的配置または位置指定なしの配置を使用する要素の z-index プロパティは無効です。

<<:  HTML ヘッド構造

>>:  CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明

推薦する

Vueモバイル端末の適応化問題の詳細説明

1. vue uiでプロジェクトを作成する 2. 基本設定項目を選択する 3. プロジェクトを実行す...

テーブルを作成するための MySQL SQL ステートメントの詳細な概要

mysql テーブル作成 SQL ステートメントMySQL テーブルを作成するための一般的な SQL...

Linux コンパイル最適化で習得しなければならないいくつかの姿勢のまとめ

01. コンパイルオプションとカーネルコンパイルLinux カーネル (英語: linux kern...

Docker に MySQL と MariaDB をインストールする方法

MySQLとMariaDBの関係MariaDB データベース管理システムは MySQL のブランチで...

Tomcat プロセスの CPU 使用率が高い場合の解決策

目次場合コンテキスト切り替えのオーバーヘッド?要約するCPU は多くの場合、システム パフォーマンス...

CentOS プラットフォーム上で LAMP 環境を素早く構築する方法

この記事では、例を使用して、CentOS プラットフォーム上で LAMP 環境を迅速に構築する方法に...

js での typeof の使い方を理解するための記事

目次ベース戻り値の型文字列とブール値数値とbigintシンボル未定義関数物体他のよくある質問参照エラ...

MySQL で複数のフィールドを連結する詳細な例

MySQL クエリ結果の行フィールドの結合は、次の 2 つの関数を使用して実装できます。 1. co...

GaussDB for MySQL パフォーマンス最適化の詳細な説明

目次背景インスピレーションは人生から生まれる速達配送の最適化原則GaussDB の最適化 (MySQ...

CentOS7 は yum を使用して mysql 8.0.12 をインストールします

この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...

MySQLでMyISAMストレージエンジンをInnodbに変更した操作記録のまとめ

一般的に、MySQL はデフォルトでさまざまなストレージ エンジンを提供しており、次のように表示され...

MySQLクエリトランザクション処理へのノード接続の実装

目次トピックmysqlの追加、削除、変更、クエリを入力しますMySQL トランザクション処理私は M...

MySqlのインストールとアンインストールに関する詳細なチュートリアル

この記事では、MySqlのインストールとアンインストールのチュートリアルを参考までに紹介します。具体...

ネイティブ JS カプセル化 vue タブ切り替え効果

この記事の例では、ネイティブJSカプセル化vueタブ切り替えの具体的なコードを参考までに共有していま...

MySQLの行数カウントに関する簡単な説明

各テーブルの行数をカウントするために使用される MySQL count() 関数は、誰もがよく知って...