HTMLのposition属性値の概要

この記事では、HTML の Position 属性値の概要を紹介します。これが、困っている友人に役立つことを願っています。

理論的には、次の 8 つの値があります。 relative、absolute、fixed、sticky

initial、inherit、unset は CSS キーワードです。これらの値は、任意の CSS 属性値に設定できます

position: static

。フローでは、設定された上、左、右、下、Z インデックスは無視されます。

position: 相対

相対位置、元の位置を基準とした

オフセット

(例: top: 10px; // 移動後、要素の上部は元の位置の上部より 10 ピクセル下に配置されます;) はドキュメント フローから分離されますが、元の位置のスペースはドキュメント フロー内に保持されます (

予約スペース)

)、 言い換えると、要素の元の位置は常に空白のままで、隣接する兄弟要素は元の位置を維持し、要素の移動によって変化しません

注: table-*-group、table-row、table-column、table-cell、table-caption 要素のposition:相対は無効です。

栗:

Position:Absolute

絶対位置決め、祖先要素がposition:static以外の属性値を持つ場合、は祖先要素に対して絶対

相対的に配置されます。 ; それ以外の場合は、

ブラウザのビューポートを基準とした絶対位置 (ここで注意すべき点は、ほとんどの人が HTML 要素または body 要素を基準とした絶対位置だと考えていることです。これは誤解です。ページがスクロール可能な場合、 HTML コンテンツ全体ではなく、ウィンドウが絶対的に配置されていることがわかります。ここで例を書くのは面倒なので、他の人から学びます。絶対配置要素の高さ

)

したがって、一般的なアプローチは、スペースを確保せずに、絶対配置要素の 親要素に、position:relative 属性

をドキュメント フローの外に追加し、要素の下にある兄弟要素の位置 up

Chestnut:

ただし、position:Absolute は上記にのみ使用されるわけではありません コンテンツのサイズ (高さと幅など) に応じてサイズ変更される要素内auto または inline 要素に設定されている場合)、要素が絶対位置position: absulute に設定されている場合、高さを未指定のまま (すなわち auto) にして、上/下/左/右を指定することで、利用可能な垂直 (水平) スペースを埋めることができます

どういう意味ですか？落ち着いて、栗を食べましょう:

(さらに、

絶対位置の要素にはマージンを設定することができ、他のマージンとマージされないため、ここでは栗については触れません)

上記の例を書きましたが、まだ 疑問

がありました:

絶対配置はドキュメント フローから分離されているのに、左の値が設定されていないときに、インライン要素の原点が絶対的に元の位置に配置されるのはなぜですか? ?親要素の原点ではなく？

(長い間探しても理由が​​見つかりませんでした。これは後で残しておきます)

position: 固定

固定位置、ブラウザウィンドウを基準とした固定位置、ではありませんスクロールバーによるスクロールを実装しました。サンプルは、毎日のWebページの

広告ポップアップウィンドウ

です。固定属性により、新しいカスケードコンテキストが作成されます。

注: 固定要素の祖先要素のtransform属性がnoneでない場合、コンテナはブラウザウィンドウから祖先要素に変更されます

position: Sticky

sticky Positioning,これは相対位置決めと固定位置決めに相当します。スティッキー配置は閾値に基づいて決定され、閾値以上の場合は相対配置、閾値未満の場合は固定配置となります。

このしきい値は、上、右、下、左の 4 つのタイプの 1 つです。 スティッキー配置を有効にするには、その 1 つを設定する必要があります。そうしないと、常に相対配置として表示されます。

上記の条件に加えて、注意する必要がある点がいくつかあります。そうでないと、

固定配置が失敗します:

1. 親要素のコンテンツはスクロールする必要があり、オーバーフローが発生することはできません。 hidden または overflow: auto 属性。

2. 親要素の高さは、sticky 配置要素の高さより低くすることはできません

3. Sticky はコンテナに関連しており、コンテナ内でのみ有効です (親要素) が配置される場所。

sticky Chestnut:

demo

Sticky Positioningの互換性

問題点: 1. 2つのCSSステートメントを記述する必要があります:

Position: Sticky; およびposition: -webkit-sticky;

2.

Internet Explorer、Edge 15 およびそれ以前の IE バージョンは、固定配置をサポートしていません。

position:initialinitialキーワードは、CSSプロパティをデフォルト値(ここでは、position:static)に設定するために使用されます

注:

IEはこのキーワードをサポートしていません

position:継承 各 CSS プロパティ定義の概要は、プロパティがデフォルトで継承される (「継承: はい」) か、デフォルトで継承されない (「継承: いいえ」) かを示します。

Inherit の素晴らしい使い方については、こちらで読むことができます:

興味深い CSS トピックについて話します (4) – リフレクションから始めて、CSS 継承について話しましょう

position: unsetunset キーワード Itは、initial と継承の組み合わせです:

1. 属性がデフォルトの継承属性の場合、値は継承と同等です

2. 属性が非継承属性の場合、値は初期値と同等です

関連する推奨事項:

HTMLのさまざまなテーブル属性のまとめ(コード付き)

BaiduホームページのHTML模倣

以上がHTMLのposition属性値の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。