css:position 位置決め属性と適用例の概要

Position 配置属性

Position は CSS において非常に重要な属性で、absolute (絶対配置)、relative (相対配置)、static (静的配置、デフォルト値)、fixed (固定配置) の 4 種類があります。 Position プロパティを使用すると、通常の位置、親要素、またはブラウザ ウィンドウを基準にして要素をオフセットできます。ポジションも初心者が混乱しやすい属性です。現在、ほとんどすべての主流ブラウザは、position 属性をサポートしています。次の記事では、position 属性と CSS でのその応用について説明します。 PHP中国のWebサイトに関連する無料のコースを最初に学ぶことができます

css基本的なチュートリアルの章 "html+css基本的な入門チュートリアル"

2

「すぐにわかる CSS ビデオ チュートリアル」をご覧ください

中 CSS 配置

位置配置関連アプリケーション

1.位置属性のCSS 内

絶対的な位置決めはドキュメント フローから完全に削除され、要素によって以前に占められていたスペースもリサイクルされます。絶対配置された要素は、配置コンテキストに基づいて配置されます。 注意すべき点: ここでは、絶対配置によってインライン要素をブロックレベルの要素に変換できることが書かれています。しかし、インライン要素が絶対配置されると、その要素の位置を把握するのは困難であることは確かです (理由: 要素に内マージンと外マージンが設定されておらず、前後左右に絶対配置要素がない場合、右に移動すると、要素は一時的に元の位置に留まりますが、要素にマージンが設定されている場合、前方または後方に絶対位置が設定されている要素がある場合、要素は一時的に元の位置から 1 マージン離れた位置に留まります。 、左、右に配置すると、要素は絶対配置要素の下にない一番上の要素を探します。) したがって、絶対配置を設定する場合は、次のことを行う必要があります。要素の上部と左側をすぐに配置します。 2. CSS 位置の相対位置と絶対位置の違いを解析します

位置には次の属性があります: static、inherit、fixed、absolute、relative

最初の 3 つは理解しやすく区別しやすいです: static:デフォルト状態、Positioned なし、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。 nherit: 親要素からposition属性の値を継承します。

修正: ブラウザ ウィンドウを基準にして絶対配置された要素を生成します。 (つまり、ブラウザをスクロールすると、要素は常にウィンドウの表示領域の特定の位置に表示されます)。

3.

CSS 位置決めの使用の概要

絶対および固定

特徴:

a. ブロックレベル要素の幅は、定義されていない場合は 100% ではなくなり、次に従って自動的に調整されます。コンテンツ

b. z-index を定義しないと、絶対要素は他の要素と重複します。

c. フローティング後の効果と同様に、通常のドキュメント フローから切り離され、スペースを占有しなくなります。absolute は、静的ではない前の親要素を基準とした絶対的な配置です。親要素の位置が指定されていない場合、absolute は HTML ドキュメント全体に対して絶対相対的に配置されます。

4.CSSのposition属性を使った配置方法の説明

静的に配置された要素は、top、right、bottom、left、z-index属性で宣言された値をすべて無視します。要素でこれら 5 つのプロパティを使用するには、まず次の 3 つの値のいずれかをその位置プロパティに適用する必要があります: 絶対、相対、固定、位置 値が継承された要素は、継承された値と同じです他のすべてのプロパティの場合、要素は親要素の位置の値を継承します。

5.

CSSで配置する4つの方法のまとめ

標準ドキュメントフローの外

特徴: (1) この要素に親要素がない場合、将来上、左、右、下がブラウザウィンドウを基準に配置されます

(2) 絶対的に配置された要素に親要素がある場合、しかし親要素が相対的な位置決めではない場合、この時点では上、左、右、下はまだ閲覧ウィンドウに対して相対的に配置されます

親を介して、親の親要素には位置決め（非静的）があり、その後絶対配置された要素は、閲覧ウィンドウに対して相対的に配置されます

(4) 絶対配置後の要素はページ上の位置を占めません

6. CSS の位​​置決めと浮動小数点数float

a. デフォルトの 100% がある場合、幅 p に関しては、絶対位置指定が追加されると、要素はすぐにインラインブロックされ、デフォルトの幅は要素の内部幅に適応します。ページの幅と高さが崩れる原因となります。

b. 絶対配置の柔軟性により、通常のページ レイアウトでは、手間を省くために絶対/相対/上/左/Z-インデックスを簡単に悪用することがあり、これは後の拡張やメンテナンスで問題を引き起こす可能性があります。トラブル

1. 位置: 絶対を使用せずに同様の機能を実現する方法

2. モバイルでのposition:fixedの互換性の問題

3.位置固定 Web ページ 質問: 純粋な CSS で作成されたドロップダウン

4. position:fixed 属性を設定した後、ブラウザで div を左右に移動するにはどうすればよいですか?

【関連おすすめ】

1. php中国語ウェブサイトの無料チュートリアル:

「CSS 0 基本入門チュートリアル」

2. php中国語ウェブサイトの無料ビデオチュートリアル:

「php.cn Dugu Jiijian (2)」 CSSビデオチュートリアル》

以上がcss:position 位置決め属性と適用例の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。